使用来自 javascript 的返回值自动填充隐藏的表单字段
Posted
技术标签:
【中文标题】使用来自 javascript 的返回值自动填充隐藏的表单字段【英文标题】：Auto populate hidden form field with return value from javascript 【发布时间】：2013-04-30 17:46:26 【问题描述】：我需要使用从 java 脚本函数返回的值填充隐藏的表单字段，但我不确定如何执行此操作。我是 javascript 新手。对你的帮助表示感谢。我需要动态填充总价格，如果不是隐藏的表单字段和文本表单字段也可以工作。
感谢一百万
<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>
【问题讨论】：
【参考方案1】：您可以像填充可见文本框一样填充隐藏的输入字段。也就是说，通过设置它的值。
您需要访问元素才能更改值。最简单的方法是为隐藏元素提供一个“id”。
<input id="frameHidden" type= "hidden" name = "frame" value = "0">
然后：
document.getElementById("frameHidden").value = "myVal";
【讨论】：
【参考方案2】：您的代码没有说明 hidden 输入字段名称为 totalprice。相反，您有一个 span-标签，其 id 为 totalprice。如果你想把你的东西放在那里，textContent 是要走的路。 https://developer.mozilla.org/en-US/docs/DOM/Node.textContent
此外，如果您使用选项 value 的信息而不是重复信息，它会更优雅。
【讨论】：
以上是关于使用来自 javascript 的返回值自动填充隐藏的表单字段的主要内容，如果未能解决你的问题，请参考以下文章
如何根据来自 javascript 函数的值呈现 Div 内容