Repeating Auto Calculation Javascript on Same Page? | XM Community
Skip to main content

I have found great success with this past question but it can't be repeated on the same page. I know there must be a simple way to separate them to their respective questions instead of interacting with each other.
Here is the code:

Qualtrics.SurveyEngine.addOnload(function()

{

var $jq= jQuery.noConflict();

$jq('.SumInput:last').attr('readonly',true);

$jq('.SumInput').keyup(function(){

$jq('.SumInput:last').val(calc());

});

function calc(){ var disc = 0; 

var cp =getVal(parseInt($jq('.SumInput').eq(0).val()));
 
var sp =getVal(parseInt($jq('.SumInput').eq(1).val())); 

if (cp0)
 

disc = 	Math.round((cp/sp)*100);


return disc; };

function getVal(val){ var fval=0; 

if (isNaN(parseInt(val))) 

{ fval = 0; } else { fval = val; } 

return fval;

}

});

Thank you!

The selectors (e.g. '.SumInput') refer to all elements with that class on the page. You need to change them to be specific to each question. For example:
jQuery("#"+this.questionId+" .SumInput");


Great, thank you! Should I have the questionID before each time it says SumInput?


https://www.qualtrics.com/community/discussion/comment/31883#Comment_31883Yes, you always need to limit the elements selected to the current question. However, you can do it more efficiently:
var sumInputs = $jq("#"+this.questionId+" .SumInput");
sumInputs.last().attr('readonly',true);
sumInputs.keyup(function() {
...etc...


Thanks so much, again, but I am in over my head I think. This is where I'm at, but it doesn't work.

var $jq= jQuery("#QR\\\\~QID2"+this.questionId);

$jq("#QR\\\\~QID2"+this.questionId+ '.SumInput:last').attr('readonly',true);

$jq("#QR\\\\~QID2"+this.questionId+ '.SumInput').keyup(function(){

$jq("#QR\\\\~QID2"+this.questionId+ '.SumInput:last').val(calc());

});

function calc(){ var disc = 0; 

var cp =getVal(parseInt($jq("#QR\\\\~QID2"+this.questionId+ '.SumInput').eq(0).val())); 

var sp =getVal(parseInt($jq("#QR\\\\~QID2"+this.questionId+ '.SumInput').eq(1).val())); 

if (cp0) 


disc = 	Math.round((cp/sp)*100);


return disc; };

function getVal(val){ var fval=0; 

if (isNaN(parseInt(val))) 

{ fval = 0; } else { fval = val; }
 
return fval;

}



You don't need QR\\\\~QID2, just do it exactly as I provided it.


https://www.qualtrics.com/community/discussion/comment/31888#Comment_31888So I don't have to inspect elements and put in the ID? Would this code be the same for every question on a page?
The last fields are correctly read only, but the calculation is not working.

var $jq= jQuery.noConflict();

$jq("#"+this.questionId+" .SumInput:last").attr('readonly',true);

$jq("#"+this.questionId+" .SumInput").keyup(function(){

$jq("#"+this.questionId+" .SumInput:last").val(calc());

});

function calc(){ var disc = 0; 

var cp =getVal(parseInt($jq("#"+this.questionId+" .SumInput").eq(0).val())); 

var sp =getVal(parseInt($jq("#"+this.questionId+" .SumInput").eq(1).val())); 

if (cp0) 


disc = 	Math.round((cp/sp)*100);


return disc; };

function getVal(val){ var fval=0; 

if (isNaN(parseInt(val))) 

{ fval = 0; } else { fval = val; } 

return fval;

}


Correct, you don't have to hard code question ids. Yes, the code would be exactly the same if the questions were the same format.
The trouble with your code is that 'this' no longer refers to the question object inside the keyup or calc functions. If you use my 'more efficient' suggestion above you won't have that issue.


https://www.qualtrics.com/community/discussion/comment/31894#Comment_31894Whew! Thank you. I finally got it to work. The final code, to have multiple percentage calculations on a single page, copy/pasted into the JS for each question, for anyone's reference:

Qualtrics.SurveyEngine.addOnload(function()

{

	/*Place your JavaScript here to run when the page loads*/

var $jq= jQuery.noConflict();

var sumInputs = $jq("#"+this.questionId+" .SumInput");

sumInputs.last().attr('readonly',true);

sumInputs.keyup(function(){

sumInputs.last().val(calc());

});

function calc(){ var disc = 0; 

var cp =getVal(parseInt($jq(" .SumInput").eq(0).val())); 

var sp =getVal(parseInt($jq(" .SumInput").eq(1).val())); 

if (cp0) 


disc = 	Math.round((cp/sp)*100);


return disc; };

function getVal(val){ var fval=0; 

if (isNaN(parseInt(val))) 

{ fval = 0; } else { fval = val; } 

return fval;

}

});


https://www.qualtrics.com/community/discussion/comment/31896#Comment_31896Actually, I think you should use the variable sumInputs inside the calc() function. Otherwise, you'll always be referring to the .SumInput elements in the first question on the page. Example:
var cp =getVal(parseInt(sumInputs.eq(0).val()));


Leave a Reply