Input value not displaying on custom form email

#1

hi all

just embedded a custom script on a form for a simple calculation, it works on the form where it multiply by the number input however the final value is not displaing on the email received, so I am wondering I need to do anything extra?
Code below

<div class="sq-form-question-answer"><input type="text" name="total" id="total" value=""></div>

javascript

function calc() {
var count = document.getElementById(‘number’).value;
document.getElementById(‘total’).value = count * 10;
document.getElementById(“total”).readOnly = true;
}

#2

You’ll run into problems if you’re trying to run client-side (i.e. runs in a visitor’s browser) JavaScript server-side (i.e. it never makes it as far as a visitor’s browser).

Have you tried using Keyword Modifiers - https://matrix.squiz.net/manuals/keyword-replacements/chapters/keyword-modifiers#Using-Keyword-Replacements-as-Argument-Values - instead?

#3

hi Jason,

would be good if you show me an example? don’t really know how keyword modifiers is going to change the input value for the form?
thanks

(John gill) #4

It looks like the <input id="total"> element is just HTML you have added to the bodycopy. If it was a real Question it would look more like <input type="text" name="q505:q2" value="" size="30" maxlength="300" id="q505_q2" class="sq-form-field">.

Only form fields that were rendered by the system from an actual Question shadow asset are processed by the form. You will need to add a new Question to the Form, and assign your calculated value to that input element.

#5

You can leave your frontend stuff on the form alone if it’s working, but when it comes to the email you can do something like this (if i’ve correctly understood what you want to do):

%response_12345_q1^multiply:10%
(Used on the email options page that would take the response entered for q1 and multiply it by 10, or any other number if one value will always remain static).

If you need to multiply one response by another that’s also really easy:
%response_12345_q1^multiply:{response_12345_q2}%
(That takes the response from one question and multiplies it by the value of another question).

(Pawel Masloch) #6

Hi Sean,

There are number of ways you can get it done using your custom form and JS. First thing worth noting, is that your input field doesn’t actually pass a number as such, but a string. Golden rule is that you’d rather convert the input value to a number. Now, this can be done either pre-pending ‘+’ to your string result or forcing conversion by: Number() or using my preferred option: parseInt();
Also, when storing values it is far more convenient to use var(s) and then call them when needed…

Here is a sample mark-up for you:

input type="number" id="number" value="20" name="field1"
input type="number" id="points" value="" name="field2"
input type="number" id="result" value="" name="field3"

And simple JS example:

document.getElementById('points').value = 100; //setting my own input value
var y = parseInt(document.getElementById("number").value); //getting pre-populated input value
var z = parseInt(document.getElementById("points").value); //getting my pre-set input value
document.getElementById('result').value = y * z; // 'math' => calculating result and passing to a field
document.getElementById('result').readOnly = true; //  setting a field to 'readOnly' - although I'd personally prefer .innerHTML = ?
// you can also,
// store your calculation in a var e.g.:
// var x = +y + +z; (converting with '+', instead parseInt(); expression)
// var x = y * z 
// OR 
// var x = parseInt(document.getElementById("number").value) * parseInt(document.getElementById("points").value);
// OR write a function for it...OR....

How you want to show submitted data in an email, is again your choice, really. You can use $ajax or keywords. I would personally use keywords on this occasion (check online manual for the detailed range), e.g.: “%response_#%” (*# = input name attr. value) or %question_answer_XXX% or %form_summary% and paste them in a form’s email body under submission action.

Hope that helps.

#7

thanks for the help all, i have managed to get it working by listing the script under the extras field for the question asked, and it seems working fine now