Side-by-side question: constant sum and auto-complete dropdown

Hi @aaron , I have worked on your first requirement you will have a sum box which will update each time you will update the text boxes. The approach i have used will use the last row of side by side question as your total row where i have removed drop downs for other columns and have only kept the total box. ! Please refer attached QSF file with the example question and let me know if it works. Could you please explain your second point, if you are looking for predefined values then it can easily be achieved by using "Add Default Choices" functionality. ! Regards, Samarth

Samarth you legend! You have no idea how many people I have asked this with no response. This is exactly what I am looking for! In terms of formatting (I know even less jq than JS) * can I make the Input boxes all 0 until they are updated by the user (even if they delete the text, it defaults back to 0?) * can I make the total box fontface="bold" and the colour red unless totalInput = 100? On the second point, under 'Add Default Choices', it will only allow me to select statements from the dropdown menu for prefill options. What I want to be able to do is pull in an embedded data field (similar to a text entry box default choice) as the auto-complete, but then allow the user to change this based on the dropdown. You are a lifesaver!!! Aaron

Hi @aaron, Glad that my code was of some help to you! I have updated the code formatting of box and default "0" is done. I still not sure about your requirement on drop down, however i have created a code whatever text will be there in the choice will be auto filled in drop down if the text in drop down is available. ! Please use the updated code, Not sure why i am unable to upload QSF file!! Qualtrics.SurveyEngine.addOnload(function() { /*Place your JavaScript here to run when the page loads*/ }); Qualtrics.SurveyEngine.addOnReady(function() { /*Place your JavaScript here to run when the page is fully displayed*/ var $jq = jQuery.noConflict();// always keep this $jq('input[type="text"]').after('%'); //insert % sign after boxes $jq('.SBS1 select:last').hide(); // remove last select for Column 1 $jq('.SBS3 select:last').hide(); // remove last select for Column 3 $jq('.SBS4 select:last').hide(); // remove last select for Column 4 var $sum = 0; // define sum variable $jq('.SBS2 input:last').val($sum); // setting the value of total box $jq('.SBS2 input:last').css('fontWeight','bold') // setting fontface="bold" //color change if($sum==100){ $jq('.SBS2 input:last').css('color','green'); } else{ $jq('.SBS2 input:last').css('color','red'); } // setting the value 0 for all boxes if blank or 0 $jq('.SBS2 input').each(function(){ $jq(this).val(getVal($jq(this).val())); }); $jq('.SBS2 input').change(function(){ $jq('.SBS2 input').each(function(){ $jq(this).val(getVal($jq(this).val())); }); }); //function for changing text value to numeric function getVal(val){ var num = parseInt(val); if(isNaN(num)) { num = 0; } return num; }; // calculating some on change $jq('.SBS2 input').not(':last').change(function(){ // for every box var $sum = 0; // define sum variable $jq('.SBS2 input').not(':last').each(function(){ $sum += +getVal($jq(this).val()); }); $jq('.SBS2 input:last').val($sum); //color change if($sum==100){ $jq('.SBS2 input:last').css('color','green'); } else{ $jq('.SBS2 input:last').css('color','red'); } }); // default choice magic var $embedded = []; var $length = $jq(".SBS1 select").length; for (var i=0;i<$length-1;i++) { $embedded[i] = $jq(".Choice .c1").eq(i).text().trim(); $jq(".SBS1 select").eq(i).find('option:contains(' +$embedded[i]+ ')').attr('selected','selected'); } }); Qualtrics.SurveyEngine.addOnUnload(function() { /*Place your JavaScript here to run when the page is unloaded*/ }); Regards, Samarth

@Samarth You have no idea how excited I am! I love this. The dropdown piece is exactly what I am looking for, but let me explain a bit more: * I am piping text from a contact list to populate the choices (in my picture, first row is ${e://Field/p1ps1}, subsequent rows are +1) * In my contact list, I have another data field called ${e://Field/p1ps1sat} (same naming convention + 1) * The options for ${e://Field/p1ps1sat} are one of the dropdown choices and I would like to pipe the embedded data ${e://Field/p1ps1sat} in to Auto Complete. One other little thing, how can I put a setTimeout on the constant sum var to automatically update based on inputs (and make it read only) Thank you so much for all your help!!! Aaron

Hi @aaron, Given your case the code should work fine with data fields too! Go ahead and try it with your setup 😀 Just to be sure, would it possible for you to share the QSF file of your survey. I can work in the file and share it back to you. With regards to setTimeout there is no need for it since the current code automatically update the sum as soon as you finish responding to any of input box. still if you want to apply periodic update you will have to go for setInterval and that will slow down your page. Place below line $jq('.SBS2 input:last').attr('readonly', true); // for read Only right below $jq('.SBS2 input:last').css('fontWeight','bold') // setting fontface="bold" Regards, Samarth

Hey @Samarth QSF file attached. I have also attached some dummy data for the contact list which has the embedded fields. I am playing around with the script and learning a lot from what you have done. I don't quite understand the embedded data for the dropdown given it is different for each row. Could I simply add a text column to the left of the dropdown menu, add Default Choices which pipe the embedded data, then change the ".Choice.c1" reference to the new column (say .SBS1), and then hide the new column? Thanks for all your help 😀 Aaron

Hey @Samarth I am addicted to this now! I have been playing around with the code you sent and learning what I can but still having some issues. For the dropdown default choice, I have tried to update based on a column I have added (picture below) which pipes the embedded data for each row: // default choice magic var $embedded = []; var $length = $jq(".SBS1 select").length; _changed '.SBS1 select' to '.SBS2 select'_ for (var i=0;i<$length-1;i++) { $embedded[i] = $jq(".Choice .c1").eq(i).text().trim(); _changed '.Choice .c1' to '.SBS1 input'_ $jq(".SBS1 select").eq(i).find('option:contains(' +$embedded[i]+ ')').attr('selected','selected'); _changed '.SBS1 select' to '.SBS2 select'_ } This doesn't seem to work. It auto-fills the last option from the dropdown menu rather than the embedded value from .SBS1? I am also having some problems with the 'sum on change'. It only updates the $sum on click rather than on input? // calculating some on change $jq('.SBS2 input').not(':last').change(function(){ // for every box var $sum = 0; // define sum variable $jq('.SBS2 input').not(':last').each(function(){ $sum += +getVal($jq(this).val()); }); $jq('.SBS2 input:last').val($sum); //color change if($sum==100){ $jq('.SBS2 input:last').css('color','green'); } else{ $jq('.SBS2 input:last').css('color','red'); } }); Aaron

!

Hi @aaron , Allow me some time kind of stuck with something at work, will revert shortly. Thanks for patience! Regards, Samarth

Hi @aaron, Many thanks for your patience! Can you please try below code and confirm if it works for you! Qualtrics.SurveyEngine.addOnload(function() { /*Place your JavaScript here to run when the page loads*/ }); Qualtrics.SurveyEngine.addOnReady(function() { /*Place your JavaScript here to run when the page is fully displayed*/ var $jq = jQuery.noConflict();// always keep this $jq('.SBS3 input[type="text"]').after('%'); //insert % sign after boxes $jq('.SBS1 input:last').hide(); // remove last select for Column 1 $jq('.SBS2 select:last').hide(); // remove last select for Column 2 $jq('.SBS4 select:last').hide(); // remove last select for Column 4 $jq('.SBS5 select:last').hide(); // remove last select for Column 5 var $sum = 0; // define sum variable $jq('.SBS3 input:last').val($sum); // setting the value of total box $jq('.SBS3 input:last').css('fontWeight','bold') // setting fontface="bold" //color change if($sum==100){ $jq('.SBS3 input:last').css('color','green'); } else{ $jq('.SBS3 input:last').css('color','red'); } // setting the value 0 for all boxes if blank or 0 $jq('.SBS3 input').each(function(){ $jq(this).val(getVal($jq(this).val())); }); $jq('.SBS3 input').keyup(function(){ $jq('.SBS3 input').each(function(){ $jq(this).val(getVal($jq(this).val())); }); }); //function for changing text value to numeric function getVal(val){ var num = parseInt(val); if(isNaN(num)) { num = 0; } return num; }; // calculating some on keyup $jq('.SBS3 input').not(':last').keyup(function(){ // for every box var $sum = 0; // define sum variable $jq('.SBS3 input').not(':last').each(function(){ $sum += +getVal($jq(this).val()); }); $jq('.SBS3 input:last').val($sum); //color change if($sum==100){ $jq('.SBS3 input:last').css('color','green'); } else{ $jq('.SBS3 input:last').css('color','red'); } }); // default choice magic var $embedded = []; var $length = $jq(".SBS2 select").length; for (var i=0;i<$length-1;i++) { $embedded[i] = $jq(".SBS1 input").eq(i).val().trim(); $jq(".SBS2 select").eq(i).find('option:contains(' +$embedded[i]+ ')').attr('selected','selected'); } }); Qualtrics.SurveyEngine.addOnUnload(function() { /*Place your JavaScript here to run when the page is unloaded*/ }); Regards, Samarth

Thank you @Samarth for all of your help! Very much appreciated.

Is there a way to create row totals using similar code? It worked beautifully for column totals, but I need row totals as well.