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

Repeating Auto Calculation Javascript on Same Page?

  • November 13, 2020
  • 9 replies
  • 67 views

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!

Best answer by TomG

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.

9 replies

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • November 14, 2020

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");


  • Author
  • November 16, 2020

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


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • November 16, 2020

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...


  • Author
  • November 16, 2020

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;

}



TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • November 16, 2020

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


  • Author
  • November 16, 2020

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;

}


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • Answer
  • November 16, 2020

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.


  • Author
  • November 16, 2020

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;

}

});


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • November 16, 2020

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()));