Reactively display a calculated field based on answer to question on the *same* page | XM Community
Skip to main content
Solved

Reactively display a calculated field based on answer to question on the *same* page


Forum|alt.badge.img+2

Hi,
I would like to collect a number from participants via a text field, and below the text field (on the same page), display a reactively calculated field based on their currently entered number.
Here's an example:
delete.pngThe problem: Because I've used embedded data, the question test2 only works if there is a page break, whereas I need the calculated field to appear at the end of question test1.
Is there a solution here? Some JS?
Many thanks!

Best answer by grahulp5

Not sure how many textboxes you will be adding but it should be somewhat like below;
var tb_value=jQuery('input[type="text"]').eq(0).val()
jQuery('input[type="text"]').keyup(function() {
var actual_val=Number(tb_value * 100)
jQuery('input[type="text"]').eq(1).val(actual_val)
})

View original

6 replies

grahulp5
QPN Level 3 ●●●
Forum|alt.badge.img+13
  • QPN Level 3 ●●●
  • 238 replies
  • July 21, 2022

Yes, you will need to get the value of textbox in a variable in JS and then run it on an event like keydown/keyup get the value in next textbox/below.
like:
var tb_value=jQuery('input[type="text"]').val()
jQuery('input[type="text"]').keyup(function() {
var actual_val=Number(tb_value * 100)
jQuery('input[type="text"]').val(actual_val)
})

Remember I am assuming you will be using 2 textboxes so use eq() as well to get and set the values into!


Forum|alt.badge.img+2
  • Author
  • 5 replies
  • July 22, 2022

Thanks, graphulp5! I'm still a bit confused. I think the second text box, for actual_val, would be in a separate question (but on the same page), right? I'm a bit confused about whether the JS would be associated with the first question, the second, or both, and also how to use eq() to retrieve actual_val and pipe it into the second text box.



grahulp5
QPN Level 3 ●●●
Forum|alt.badge.img+13
  • QPN Level 3 ●●●
  • 238 replies
  • July 22, 2022

That will be in the same question in onReady function, for that we can use keydown function.

To retrieve the value we will need to use eq() to get the required value.


Forum|alt.badge.img+2
  • Author
  • 5 replies
  • July 25, 2022

I'm sorry to be so slow, but I've been playing with a number of iterations and haven't been able to set this up correctly. Would it be straightforward to provide a MWE? Thanks again.


grahulp5
QPN Level 3 ●●●
Forum|alt.badge.img+13
  • QPN Level 3 ●●●
  • 238 replies
  • Answer
  • July 26, 2022

Not sure how many textboxes you will be adding but it should be somewhat like below;
var tb_value=jQuery('input[type="text"]').eq(0).val()
jQuery('input[type="text"]').keyup(function() {
var actual_val=Number(tb_value * 100)
jQuery('input[type="text"]').eq(1).val(actual_val)
})


Forum|alt.badge.img+2
  • Author
  • 5 replies
  • July 28, 2022

Thanks so much!


Leave a Reply