Putting a javascript calculation result into HTML form automatically

Question

I have a javascript function that calculates an integer sum of some variables. It's basically

fscalculate() = number1 + number2 + number3 = totalScore

where fscalculate() adds three numbers and sets the result as the variable totalScore.

I have created a form that asks the user for his name and email, I have used a php script to send the name and email to an email address using the POST method.

What I would like is to create a field that is automatically populated with the integer totalScore. If this is possible then I should be able to add a line to my php script to send this with the user name and email address,

Any help would be most appreciated!

Chilledrat · Accepted Answer · 2013-11-30 16:23:07Z

2

Use the HTML5 <output> Tag. It's designed for capturing form calculation results.

<form oninput="totalScore.value = (+num1.value)+(+num2.value)+(+num3.value);">
    <input type="number" id="num1" />+
    <input type="number" id="num2" />+
    <input type="number" id="num3" />=
    <output name="totalScore" for="num1 num2 num3"></output>
</form>

Here's a breakdown of what's happening:

Since the input is a string, we want to coerce it into a number using +someString
We specify the list of input IDs of fields that go into the calculation. Typically, this is used so that we don't get NaN result in case one of the input fields is empty. But since we're coercing the input into a number, an empty string is converted to 0. Hence, it's not necessary, but good to have for clarity (especially if the calculations get more complex).
Note that we don't include name attributes for the number inputs. This is to prevent them from getting submitted. We're only concerned about the result.

Also, here's a list of browsers that currently support output.

edited Nov 30, 2013 at 16:23

Chilledrat

2,6143 gold badges31 silver badges40 bronze badges

answered Nov 30, 2013 at 15:30

Tom Chung

1,4229 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2840467 Over a year ago

This answer looks promising! However, my PHP code looks like this:/* Data Variables */ $email = $_POST['email']; $name = $_POST['name']; $score = $_POST['score']; $body = <<<EOD <hr> Name: $name Email: $email Score: $score If I substitute totalScore for score would this work?

goutham2027 · Accepted Answer · 2013-11-30 15:21:06Z

0

var totalscore = num1+num2+num3;

Assuming your html form element is

<input type="text" id="score">

use jquery

$("#score").val( "hi");

complete test code:

<html>
<head>
<script src="jquery.js">
</script>
<script>
$(document).ready(function(){
$("#score").val( "hi");
});
</script>
</head>
<body>
<input type="text" id="score">
</bodY>
</html>

answered Nov 30, 2013 at 15:21

goutham2027

984 bronze badges

Comments

Sk6 · Accepted Answer · 2013-11-30 15:25:32Z

0

Try something like this:

<input type="text" id="total" value="" disabled />
<script>
    var totalScore = num1+num2+num3;
    document.getElementById("total").value = totalScore;
</script>

Good Luck!

answered Nov 30, 2013 at 15:25

Sk6

271 silver badge7 bronze badges

Collectives™ on Stack Overflow

Putting a javascript calculation result into HTML form automatically

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related