How to calculate (Multiplication) two fields and get the answer on a third field | XM Community
Skip to main content

Hello,
Can someone help me with the JavaScript that would multiply the value of two text entry fields for which I have set validations of content type as "number". The result of the multiplication of these two fields needs to be displayed in a third field (Text Entry).
Basically all I want is to multiply the amount of cards being requested by the $ amount in each card.
I'm not a programmer, so I'm afraid this may be harder than I'm thinking it will be given these are currently text entry fields (strings), and somehow they need to be converted to numerical even though that is what the content type is set to?
Below are the 3 fields I'm referring to.
Number of cards: ${q://QID11/ChoiceTextEntryValue}
Amount per card: ${q://QID12/ChoiceTextEntryValue}
Total amount requested: ${q://QID13/ChoiceTextEntryValue}
I assume I need the JavaScript to be placed under the "Total amount requested" field but not sure where in the options.
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*/
});
Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/
});
I would appreciate any input you can provide.

Hi jgcelis26 ,
With information provided by you it wont be possible to implement the same.
So, if you want to approach by above method only then kindly request you to give access to survey.
Else you can apply JS to achieve the same easily :
I am assuming that On this page only these three textboxes are there and nothing else like below:
image.png
then you can write the JS code in the question containing the "Total amount Reserved " text box as follows:
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*/let ques=document.getElementById("Questions");
let text=document.querySelectorAll("input[type=text]");

ques.addEventListener("keyup", function() {
  texte2].value=texte0].value*texte1].value;
});

});

Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/

});

Hope this solves your problem☺️!!



Hello qualtrics_nerd,
Thank you very much for your response. Unfortunately there are a few more fields in the survey. I created a test survey with only 3 fields, then placed your code and it worked beautifully.
I'd be more than happy to give you access to the survey but I can only share it with people within my organization.
Do you have any other suggestions?
Thank you again for your help!!!


Hi jgcelis26 ,
Can you share preview link by making test survey having similar structure ?
Otherwise you can use embedded variable but it will not update it dynamically.


Hi qualtrics_nerd,
There you go
Preview - Qualtrics Survey | Qualtrics Experience Management
Thank you so very much!


Hi jgcelis26 ,
Can you try below code :
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*/let let ques=document.getElementById("Questions");
let text=document.querySelectorAll("input[type=text]");

ques.addEventListener("keyup", function() {
  texte7].value=texte6].value*texte5].value;
});

});

Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/

});


Hope this solves your problem😊!!


Hi qualtrics_nerd,

It is giving me an error.
Any suggestions?

Again, VERY MUCH APPRECIATED!
image.png


hi jgcelis26 ,
My bad copy pasting error, try again with below,
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*/
let ques=document.getElementById("Questions");
let text=document.querySelectorAll("input[type=text]");

ques.addEventListener("keyup", function() {
  texte7].value=texte6].value*texte5].value;
});

});

Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/

});


Hi qualtrics_nerd,
Thank you very much! It works beautifully!
Have a wonderful day!


https://community.qualtrics.com/XMcommunity/discussion/comment/54576#Comment_54576You are Welcome😊!!


Hello qualtrics_nerd,
If it is not too much trouble, is there a way to add decimal points to the Total field. So if there are 50 cards requested with $50, then the total would show as 2,500. Or even if there were 50 cards requested with 50.25 each, then the total would show as 2,512.50
Thank you very much.


Hello qualtrics_nerd,
I want to clarify that I meant the comma "," since the decimal point does show if the product result does have a decimal point.
Thank you!


hi jgcelis26 ,
For above you can try below code considering everything else is same:
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*/
let ques=document.getElementById("Questions");
let text=document.querySelectorAll("input[type=text]");

ques.addEventListener("keyup", function() {
  texte7].value=(texte6].value*texte5].value).toLocaleString();
});

});

Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/

});


Hoping below is what you requested
image.png
Hope this solves your problem😊!!


Hi qualtrics_nerd,
Thank you so much! One last thing, would it be possible to allow commas in the Amount field without getting the following result in the total.
image.pngThanks!


Hi jgcelis26 ,
At my end it is not throwing that error:
image.pngFurther it is part of error handling , which occurs when value entered in "No. of cards " and "Amount per Card" are not a numeric value(such as they are strings)
image.png
By adding comma you are changing the value to string , you will have to parseFloat() that value to make it as float value so as mathematical operation can take place and to avoid error if you want comma their.


Hi qualtrics_nerd,
I'm not sure how go about adding the "parseFloat()" to allow for a comma to be added in the "Amount per Card" field, so I think it's ok to leave the comma out of the "Amount per Card" field. This is less likely to occur in the "No. of Cards" field. That is, that it would go over 999. However, more likely to occur in the Amount per Card field.
I'm just trying to avoid any confusion for those submitting the request. 🙂
Again, Thank you so much for all your help!


Hello qualtrics_nerd,
I wanted to thank you again for all your help getting this JavaScript done for me. It was exactly what I needed.
Very much appreciated!
Have a great day! 👋


https://community.qualtrics.com/XMcommunity/discussion/comment/54653#Comment_54653You are welcome.😊


Hello @qualtrics_nerd,

I hope you are doing well! I have a question I’d like to run by you. I’m working on a totally separate Qualtrics form and I want to accomplish the same thing you helped with last time. That is, to get the product of 2 numbers. E.g.,

Value 1 = 5

Value 2 = 3

Total = 15

 

Last time you provided me with the code below that worked great! What I’d like to know/understand is what needs to change in this code for me to be able to use it in similar scenarios where I have to get the product of two numbers (fields). Is there anything specific that I could modify in the code below that would allow me to use the code in other forms? I guess I don’t quite get how this code worked in my previous form but would not work in a new form. I figured it would have to do with the field names? That is, text7].value=(text=6].value*texte5].value).toLocaleString(); 

But again, I don’t even know where you got those from when you gave me the code.

THANK 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*/
let ques=document.getElementById("Questions");
let text=document.querySelectorAll("inputrtype=text]");

ques.addEventListener("keyup", function() {
  textc7].value=(text6].value*textl5].value).toLocaleString();
});

});

Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/

});

 

 


Hello @qualtrics_nerd,

I hope you are doing well! I have a question I’d like to run by you. I’m working on a totally separate Qualtrics form and I want to accomplish the same thing you helped with last time. That is, to get the product of 2 numbers. E.g.,

Value 1 = 5

Value 2 = 3

Total = 15

 

Last time you provided me with the code below that worked great! What I’d like to know/understand is what needs to change in this code for me to be able to use it in similar scenarios where I have to get the product of two numbers (fields). Is there anything specific that I could modify in the code below that would allow me to use the code in other forms? I guess I don’t quite get how this code worked in my previous form but would not work in a new form. I figured it would have to do with the field names? That is, text,7].value=(texte6].value*textu5].value).toLocaleString(); 

But again, I don’t even know where you got those from when you gave me the code.

THANK 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*/
let ques=document.getElementById("Questions");
let text=document.querySelectorAll("inputetype=text]");

ques.addEventListener("keyup", function() {
  textc7].value=(text 6].value*texta5].value).toLocaleString();
});

});

Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/

});

 

 

Hi  @jgcelis26 ,

Imagine you have a webpage where you have a form. Each of these places is like a box where you can put text. These boxes are arranged in a specific order when the webpage is created.

Now, there's a special list that keeps track of all these boxes, and it starts counting from zero. So, if you have three boxes, you'd call them the 1st box, the 2nd box, and the 3rd box, but in this special list, you'd say the 0th box, the 1st box, and the 2nd box.

So, when someone says "text>5]", "texto6]", and "textx7]", they're talking about the 6th, 7th, and 8th boxes in the list. If there were ten boxes, it would go from the 0th box to the 9th box.

Now, this special list is stored in something called a variable, and this variable is named "text" in the computer code. So, "textt5]" means the 6th box, "text56]" means the 7th box, and so on.

So, in simple terms, they're just saying which box they want to work with, like picking a specific box out of all the boxes on the webpage.

Hope it resolves your query😊!! 


Thank you very much, @qualtrics_nerd. This is exactly what I needed. I was totally unaware of this list that is kept as a variable within the webpage, so I was really scratching my head trying to figure out where you had gotten those values from.

Thank you again!!!! 😊 


Leave a Reply