html output update on form submit
Question
This should be a really simple one, but I can't seem to find a solution to this anywhere explicitly. I'm looking to do a javascript calculation (from a bunch of inputs in a form), for which I get two numbers. These numbers will then update the values of two html output elements within the same form. Here's a minimal working example of what I'm trying to do (if there is a better way of doing this I'm all ears):
<!DOCTYPE HTML PUBLIC "~//IETF//DTD HTML//EN">
<html>
<head>
<script>
function somecalc() {
var a = parseFloat(document.forms["form1"]["id1"].value);
var b = parseFloat(document.forms["form1"]["id2"].value);
var c = parseFloat(document.forms["form1"]["id3"].value);
var d = parseFloat(document.forms["form1"]["id4"].value);
var out1 = a-b-c-d;
var out2 = a+b+c+d;
var outarr = [];
outarr.push(out1);
outarr.push(out2);
return outarr;
}
</script>
</head>
<body>
<form name="form1">
<table>
<tr>
<td>
Head1
</td>
<td>
Head2
</td>
<td>
Head3
</td>
<td>
Head4
</td>
</tr>
<tr>
<td>
<input type="text" name="1" placeholder="Enter 1" id="id1" size="10" maxlength="10" />
</td>
<td>
<input type="text" name="2" placeholder="Enter 2" id="id2" size="10" maxlength="10" />
</td>
<td>
<input type="text" name="3" placeholder="Enter 3" id="id3" size="10" maxlength="10" />
</td>
<td>
<input type="text" name="4" placeholder="Enter 4" id="id4" size="10" maxlength="10"/>
</td>
</tr>
</table>
<p><input type="submit" value="Run" onclick="somecalc();"></p>
<table border="1">
<tr>
<td>
Out1 = <output name="out1" for=""></output>
</td>
</tr>
<tr>
<td>
Out2 =<output name="out2" for=""></output>
</td>
</tr>
</table>
</form>
</body>
</html>
How could I get the first element of outarr to fill in out1, and likewise, the second element of outarr to update out2 when the Run button is pressed?
3 answers
solution1
1 ACCPTED 2014-12-08 04:52:56
You can just set the value of out1 and out2 via the value property.
function somecalc() { var a = parseFloat(document.forms["form1"]["id1"].value); var b = parseFloat(document.forms["form1"]["id2"].value); var c = parseFloat(document.forms["form1"]["id3"].value); var d = parseFloat(document.forms["form1"]["id4"].value); var out1 = abcd; var out2 = a+b+c+d; document.forms["form1"]["out1"].value = out1; document.forms["form1"]["out2"].value = out2; return [out1, out2]; }
<!DOCTYPE HTML PUBLIC "~//IETF//DTD HTML//EN"> <html> <body> <form name="form1"> <table> <tr> <td>Head1</td><td>Head2</td><td>Head3</td><td>Head4</td> </tr> <tr> <td> <input type="text" name="1" placeholder="Enter 1" id="id1" size="10" maxlength="10" /> </td> <td> <input type="text" name="2" placeholder="Enter 2" id="id2" size="10" maxlength="10" /> </td> <td> <input type="text" name="3" placeholder="Enter 3" id="id3" size="10" maxlength="10" /> </td> <td> <input type="text" name="4" placeholder="Enter 4" id="id4" size="10" maxlength="10"/> </td> </tr> </table> <p><input type="submit" value="Run" onclick="somecalc();"></p> <table border="1"> <tr> <td> Out1 = <output name="out1" for=""></output> </td> </tr> <tr> <td> Out2 =<output name="out2" for=""></output> </td> </tr> </table> </form> </body> </html>
solution2
1 2014-12-08 04:55:28
function somecalc() {
var a, b, c, d, out1, out2;
a= parseFloat(document.forms["form1"]["id1"].value);
b = parseFloat(document.forms["form1"]["id2"].value);
c = parseFloat(document.forms["form1"]["id3"].value);
d = parseFloat(document.forms["form1"]["id4"].value);
out1 = a-b-c-d;
out2 = a+b+c+d;
document.querySelector("output[name=out1]").innerHTML = out1
document.querySelector("output[name=out2]").innerHTML = out2
}
Try this or you can 'id' s in your html like
<output id="out1" .. > and document.getElementById("out1").innerHTML = out1
solution3
1 2014-12-08 05:21:34
You could do something like this also. You could use document.querySelector or the method you use instead of document.getElementById I just did that for simplicities sake when trying to work through your code.
Generally javascript files are linked to external files instead of being declared in a script tag, but I suppose you could be doing this for homework or something where putting it all in the HTML makes it a little simpler. If you did seperate it out you would have to make a click handler such as in my code which is the btnRun.addEventListener('click', runClick); Also the e.preventDefault() prevents the default action of the submit button which is submitting the form via whatever action is stated (GET, POST, etc..)
Also Mozilla Developer Network has great resources for javascript syntax and examples if you don't know about it https://developer.mozilla.org/en-US/docs/Web/JavaScript
var btnRun = document.getElementById('run');
var out2 = document.getElementById('out2');
var out1 = document.getElementById('out1');
function runClick(e){
e.preventDefault();
var output1, output2;
var a = parseFloat(document.getElementById('id1').value);
var b = parseFloat(document.getElementById('id2').value);
var c = parseFloat(document.getElementById('id3').value);
var d = parseFloat(document.getElementById('id4').value);
output1 = a + b + c + d;
output2= a - b - c - d;
out1.innerText= output1;
out2.innerHTML = output2;
}
btnRun.addEventListener('click', runClick);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.