Auto populate hidden form field with return value from javascript
Question
I need to populate a hidden form field with value returned from a java script function and am unsure how to do so. I am new to JavaScript. Your help will be greatly appreciated. I need totalprice to be populated on the fly, if not a hidden form field and text form field will also work.
thanks a million
<html>
<head>
<script type = "text/javascript">
var allprices = [];
var index = 0;
function chkrads(frmName,rbGroupName) {
var chosen = "";
var radios = document[frmName].elements[rbGroupName];
for (var i=0; i <radios.length; i++) {
if (radios[i].checked || radios[i].selected) {
chosen = radios[i].value;
}
}
if (chosen == 0) {printprice = 0}
if (chosen == 35) {printprice = 35}
if (chosen == 36) {printprice = 35}
if (chosen == 29.95) {printprice = 29.95}
if (chosen == 34.95) {printprice = 34.95}
if (chosen == 39.45) {printprice = 39.45}
if (chosen == 44.45) {printprice = 44.45}
if (chosen == 49.95) {printprice = 49.95}
if (chosen == 64.45) {printprice = 64.45}
if (chosen == 74.85) {printprice = 74.85}
if (chosen == 89.85) {printprice = 89.85}
if (chosen == 94.40) {printprice = 94.40}
if (chosen == 99.40) {printprice = 99.40}
if (chosen == 104.85) {printprice = 104.85}
if (chosen == 179.70) {printprice = 179.70}
if (chosen == 209.70) {printprice = 209.70}
if (chosen == 299.50) {printprice = 299.50}
if (chosen == 329.45) {printprice = 329.45}
if (chosen == 349.50) {printprice = 349.50}
if (rbGroupName == "size") {index = 0}
if (rbGroupName == "colour") {index = 1}
if (rbGroupName == "frame") {index = 2}
if (rbGroupName == "glass") {index = 3}
if (rbGroupName == "hook") {index = 4}
if (rbGroupName == "delivery") {index = 5}
allprices[index] = printprice;
var totalprice = 0;
for (var i =0; i <allprices.length; i++) {
if (!isNaN(allprices[i])) {
totalprice = totalprice + allprices[i];
}
}
document.getElementById("result").style.display = "block";
document.getElementById("result").innerHTML = totalprice;
}
</script>
</head>
<body>
<form name= "myform" style="font-size:11px; font-family:Arial, Helvetica, sans-serif;">
Initial Billing:
<select name = "size" onchange = "chkrads('myform', 'size')">
<option></option>
<option value='29.95'>1 mo 29.95</option>
<option value='34.95'>1 mo 34.95</option>
<option value='39.45'>1 mo sh 39.45</option>
<option value='49.95'>ACT Only 49.95</option>
<option value='64.45'>ACT+SH 64.45</option>
<option value='94.40'>Monthly 94.40</option>
<option value='99.40'>Monthly 99.40</option>
<option value='74.85'>Qtrly 74.85</option>
<option value='89.85'>Qtrly 89.85</option>
<option value='104.85'>Qtrly 104.85</option>
<option value='179.70'>Semi 179.70</option>
<option value='209.70'>Semi 209.70</option>
<option value='299.50'>Annual 299.50</option>
<option value='329.45'>Annual 329.45</option>
<option value='349.50'>Annual 349.50</option>
<option value='49.45'>Mobile Monthly 49.45</option>
<option value='119.85'>Mobile Qtrly 119.85</option>
<option value='239.70'>Mobile Semi 239.70</option>
<option value='439.45'>Mobile Annual 439.45</option>
</select>
<input type= "hidden" name = "colour" value = "0">
Lockbox: <input type = "checkbox" name = "colour" value = "36" onclick = "chkrads('myform', 'colour')">
<input type= "hidden" name = "frame" value = "0">
Second button: <input type = "checkbox" name = "frame" value = "35" onclick = "chkrads('myform', 'frame')">
</form>
<div id="result" style="display:none;"><strong></strong> <span id="totalprice"></span> </div>
</body>
</html>
2 answers
solution1
0 2013-04-30 17:52:13
You can populate a hidden input field the same way as you would a visible textbox. That is, by setting its value.
You'll need to access the element in order to change the value. The easiest way is to provide the hidden element with an 'id'.
<input id="frameHidden" type= "hidden" name = "frame" value = "0">
then:
document.getElementById("frameHidden").value = "myVal";
solution2
0 2013-04-30 23:07:54
Your code says nothing of hidden Input field with the name of totalprice . instead you have an span -tag with an id of totalprice . In case you want to put your stuff there, textContent is the way to go. https://developer.mozilla.org/en-US/docs/DOM/Node.textContent
Besides, it would be more elegant, if you use the information of your options value instead of duplicating information.
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.