Have an idea?

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

How can I dynamically show the selected answer on the same page as the select question ?

I would like to show the selected item(s) from a select question on the same page as the question. The goal is to show the sum of all the items selected so that the user don't have to do the maths himself. Thank you for your time!
asked Dec 18, 2018 by Martin (325 points)

1 Answer

+2 votes
 
Best answer
Try adding this code to your relevant items:

<input type="hidden" class="myprice" value="15"/>


"15" must be replaced with the value for the current list item.  Feel free to add an internal label to your items for ease come analysis.

Then add this wherever you want the total displayed:

<span class="mytotalprice"></span>


Finally, the question needs to be given this JavaScript:

<script>
$(document).ready(SSI_CustomGraphicalCheckbox);

function SSI_CustomGraphicalCheckbox() {
    var total = 0;
    $('input[name="hid_list_[% QuestionName() %]"]').val().split(',').forEach(function(item){
        if (SSI_GetValue('[% QuestionName() %]_' + item)) {
            var price = Number($('#[% QuestionName() %]_' + item).closest('.clickable').find('.myprice').val());
            if (price) {
                total += price;
            }
        }
    });
    
    $('.mytotalprice').text(total);
}
</script>
answered Dec 18, 2018 by Zachary Platinum Sawtooth Software, Inc. (129,350 points)
selected Dec 19, 2018 by Martin
Hi Zachary, may I ask what the value "15" refers to? Thanks.
Martin mentions summing up some property from the selected items, possibly price or quantity.  Whatever the property is, we need someway to tell the script what value it should add to the sum when the checkbox is selected.  I chose to go with adding a hidden HTML input to each list item whose value is whatever number needs to be added to the sum.
Got it. So the input tag is for each code label and the value is the weight each code has.

Thanks mate.
Hi Zachary! Thank you for your answer! However, the sum isn't updating unless I reload the page. Do you know if there is a way to update the sum dynamically without reloading the page ?
I solved my issue by setting a listener on the clickable classes
<script>
$(document).ready(SSI_CustomGraphicalCheckbox);
function SSI_CustomGraphicalCheckbox() {
    $(".clickable").click(function(e){
        var total = 0;
        $('input[name="hid_list_[% QuestionName() %]"]').val().split(',').forEach(function(item){
            if (SSI_GetValue('[% QuestionName() %]_' + item)) {
                var price = Number($('#[% QuestionName() %]_' + item).closest('.clickable').find('.myprice').val());
                if (price) {
                    total += price;
                }
            }
        });
         
        $('.mytotalprice').text(total);
    })
}
</script>
Do you have graphical radio buttons and checkboxes disabled in your survey settings, by chance?  The function SSI_CustomGraphicalCheckbox is triggered automatically when a graphical input changes states, but it wouldn't happen if you are using default checkboxes.

I saw you commented on the "hid_list_..." part.  Did you figure that part out on your own then?
No they aren't, I don't really know why it didn't work..

Yes, I saw the hidden balise!
...