Javascript：如何在单击提交按钮时将隐藏的输入标签附加到表单中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15283945/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript: How to append hidden input tag into a form when submit button is clicked?
提问by netizen0911
I have variable name and value for hidden input tag that I want to append into form right when submit button is clicked. How do I go about coding it?
我有隐藏输入标签的变量名称和值，我想在单击提交按钮时将其附加到表单中。我该如何编码？
Here's my code:
这是我的代码：
<script type="text/javascript">
hname="reference";
hvalue="1";
function insertInput(){
document.write( "<input type='hidden' name='" + hname + " ' value=' " + hvalue + " '/><br/>");
}
</script>
<form id="form1">
<p><label>Username:</label> <input type="text" name="username" size="10"/></p>
<p><label>Password:</label> <input type="password" name="password" size="10"/></p>
<p id="hidden"><!-- Insert Hidden input tag here --></p>
<button type="submit' onClick="insertInput();">Log In</button>
</form>
I can't seem to get it work. Please help! Thanks in advanced!
我似乎无法让它工作。请帮忙！先谢谢了！
回答by eburgos
Try this:
试试这个：
<form id="form1">
<p><label>Username:</label> <input type="text" name="username" size="10" /></p>
<p><label>Password:</label> <input type="password" name="password" size="10" /></p>
<p id="hidden"><!-- Insert Hidden input tag here --></p>
<button type="submit" onclick="return insertInput();">Log In</button>
</form>
<script type="text/javascript">
hname="reference";
hvalue="1";
function insertInput(){
var para, hiddenInput, br;
para = document.getElementById('hidden');
hiddenInput = document.createElement('input');
hiddenInput.type = 'hidden';
hiddenInput.name = hname;
hiddenInput.value = hvalue;
para.appendChild(hiddenInput);
br = document.createElement('br'); //Not sure why you needed this <br> tag but here it is
para.appendChild(br);
return false; //Have this function return true if you want to post right away after adding the hidden value, otherwise leave it to false
}
</script>
回答by rodneyrehm
document.write()only works while the document is being parsed. As soon as the document is in ready state (i.e. the DOMContentLoadedevent has been fired), document.writewill implicitly call document.open(), which in turn resets your document.
document.write()仅在解析文档时有效。一旦文档处于就绪状态（即DOMContentLoaded事件已被触发），document.write将隐式调用document.open()，从而重置您的文档。
You want to use the DOM methods for this:
您想为此使用 DOM 方法：
var form = document.getElementById('form1');
form.addEventListener("submit", function() {
var input = document.createElement('input');
input.type = 'hidden';
input.name = 'reference';
input.value = '1';
this.appendChild(input);
}, true);
回答by Useless Code
That won't work because document.writeonly works while the page is loading, trying to use it after the page has loaded will fail.
这是行不通的，因为document.write只有在页面加载时才有效，在页面加载后尝试使用它会失败。
You could do it with pure DOM scripting but I would suggest using a DOM library like jQuery, they make doing things like this much easier.
你可以用纯 DOM 脚本来完成，但我建议使用像jQuery这样的 DOM 库，它们使做这样的事情更容易。
Here's a way you could do it with jQuery:
这是您可以使用 jQuery 实现的方法：
<form id="form1">
<p><label>Username:</label> <input type="text" name="username" size="10"/></p>
<p><label>Password:</label> <input type="password" name="password" size="10"/></p>
<button type="submit">Log In</button>
</form>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function () {
var hname = "reference",
hvalue = "1";
$("#form1").on("submit", function () {
$(this).append("<input type='hidden' name='" + hname + " ' value=' " + hvalue + " '/><br/>");
});
});
</script>
