Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Live calculation on page based on checkboxes

I have a page consisting of 2 tables.  The table layouts are similar (table 1 has 4 rows; 4 columns ; table 2 has 6 rows; 4 columns ).   Column 1 & 2: contain text, column 3 is a price that I am bringing into the table from another question using for example  
 $[% FormatNumber(LoaderOpt_price1, ",", ".", 0) %] 
,  the last column contain the check boxes.

Respondents are asked to select any item (s).

The client would like to show the respondents the amount of money live on the page, based on their selected answer(s).

So, if I have a based amount of 23678 and I choose checkbox 1 then the price corresponding with that checkbox 1 should be added to the base price and displayed.  

I found a previous post with the code

<script>
$(document).ready(function(){
    updateDynamicPrice();
    $('select').change(updateDynamicPrice);
})
 
function updateDynamicPrice() {
    var base = [% SelectQ0 %];
    var select1 = SSI_GetValue('SelectQ1');
    var select2 = SSI_GetValue('SelectQ2');
    var select3 = SSI_GetValue('SelectQ3');
    var select4 = SSI_GetValue('SelectQ4');
     
    var price = base * 5 + 5;
    price += select1 ? (select1 - 1) * 4 : 0;
    price += select2 ? select2 - 1 : 0;
    price += select3;
    price += select4 ? select4 - 1 : 0;
     
    $('.dynamicPrice').text(price);
}
</script>


I don't know how to modify the code to work with checkboxes.

Thank you in advance for any help you can provide.
asked Jun 3 by Sandy

1 Answer

+1 vote
That code has dropdown elements in mind.  If you need to support checkboxes (and have graphical checkboxes enabled in your survey settings), you'll want to replace both instances of "updateDynamicPrice" with "SSI_CustomGraphicalCheckbox."  Line 4 can be tossed.

The pricing code from line 8 to line 18 can be updated for your situation, but the exact code needed depends on how your pricing works.
answered Jun 3 by Zachary Platinum Sawtooth Software, Inc. (129,350 points)
Yes,  I am working with graphical checkboxes.  What I want to do is if the respondent clicks the checkbox than the price to the left of the checkbox is added to the base price and if the respondent de-selects the checkbox the price is subtracted from the base price.   I have the prices for each checkbox in a constructed list and I am displaying the prices on the page by using
 [%ListLabel(Price1,1)%] 
This is what I don't know how to do.    How would I write the code to make  this work?

I have tried this

 <script>
$(document).ready(function(){
    SSI_CustomGraphicalCheckbox();
  
})
  

 function SSI_CustomGraphicalCheckbox() {
    var base = [%ACBC_BYO_12%];
    var select1 = SSI_GetValue('AddEX1_LoaderOpt_1');
    var select2 = SSI_GetValue('AddEX1_LoaderOpt_2');
    var select3 = SSI_GetValue('AddEX1_LoaderOpt_3');
    
      
    var price = base ;
    
     if (select1 == 1)
      {
          var price += [%LoaderOpt_price1%] ;
      }
    
        
      
    $('.dynamicPrice').text(price);
    
    
}


 
</script>




But I am getting nothing
Nothing about that script looks clearly wrong from what I can see, but let me take a shot.

Does "[% ACBC_BYO_12 %]" and "[% LoaderOpt_price1 %]" work when used on there own in a question text?  Both of those values need to be defined before the respondent gets to this page in order for the code to work.

You said that your prices are contained in a constructed list named "Price1."  So should line 19 be referencing that constructed list instead of "LoaderOpt_price1"?

Also, I would double check that there's a <div> or <span> or something with the class "dynamicPrice" to print the price.

<span class="dynamicPrice"></span>
Yes "[%ACBC_BYO_12%]" and  [%LoaderOpt_price1%] work when used on there own in the question text.   When I have just the syntax var price = base (line 15) only,  the base price is being displayed.  It doesn't work when I try to add the syntax dealing with the checkbox1 being checked to add the price which is being displayed next to the checkbox1 the price being displayed is [%LoaderOpt_price1 %]  to the base (line 17 through line 20).   Yes, I have the syntax
 <span class="dynamicPrice"></span>
Thanks for the information.  It's good to know that the "if" code specifically seems to be working wrong.  When the "if" statement is included, does the <span> just not update at all, or does it update to some incorrect value?

Perhaps your browser's console will offer some insight.  You can access the console by pressing F12 while on this survey page and looking for a tab labelled "Console."  Are there any errors in the console when you click checkboxes on this page?
I found my error  " var price += [%LoaderOpt_price1%] ;"   when i removed the "var" and just kept price +=[%LoaderOpt_price1%] , it now works.  

I also changed my code to

 <script>
$(document).ready(function(){
    SSI_CustomGraphicalCheckbox();
  
})
  

 function SSI_CustomGraphicalCheckbox() {
    var base = [%ACBC_BYO_12%];
    var select1 = SSI_GetValue('AddEX1_LoaderOpt_1');
    var select2 = SSI_GetValue('AddEX1_LoaderOpt_2');
    var select3 = SSI_GetValue('AddEX1_LoaderOpt_3');
    
      
     var price = base ;
    
       //alert (select1);
    
      price += select1 * [%LoaderOpt_price1%] ;        
      price += select2 * [%LoaderOpt_price2%] ;        
      price += select3 * [%LoaderOpt_price3%] ;        

        //alert (price);
      
    $('.dynamicPrice').text(price);
    
    
}


 
</script>



to simply it.

 Thank you for your patience.
Oh right, that totally slipped past me.
...