Javascript：单击submit按钮时，如何将隐藏的输入标记附加到表单中？

我有一个隐藏输入标记的变量名和值，我想在单击提交按钮时将其追加到表单中。我该如何对它进行编码

这是我的密码：

<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>

hname=“参考”；
hvalue=“1”；
函数insertInput（）{
文件。写（“
”）；
}
用户名：

密码：


document.write（）
仅在解析文档时有效。一旦文档处于就绪状态（即触发了
DOMContentLoaded
事件），
document.write
将隐式调用
document.open（）
，从而重置文档

您希望为此使用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);

这不起作用，因为
document.write
仅在加载页面时起作用，在加载页面后尝试使用它将失败

您可以使用纯DOM脚本编写，但我建议使用DOM库，例如，这样做会更容易

这里有一种使用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>


用户名：

密码：

登录
$（函数（）{
var hname=“reference”，
hvalue=“1”；
$（“#form1”）。关于（“提交”，函数（）{
$（此）。追加（“
”）；
});
});
试试这个：

<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>


用户名：

密码：


登录
hname=“参考”；
hvalue=“1”；
函数insertInput（）{
变量para，hiddenInput，br；
para=document.getElementById（'hidden'）；
hiddenInput=document.createElement（'input'）；
hiddenInput.type='hidden'；
hiddenInput.name=hname；
hiddenInput.value=hvalue；
第3段（hiddenInput）；
br=document.createElement（'br'）；//不确定为什么需要这个
标记，但它在这里
第3段（br）；
return false；//如果要在添加隐藏值后立即发布，请让此函数返回true，否则将其保留为false
}
永远不要使用
文档。编写
，除非你使用时间机器将此代码发送回1996年…此代码似乎有效。谢谢你，伙计！还有一个问题。。。如果变量hname和hvalue等于数组，如：hname=[“宝马”、“沃尔沃”、“萨博”、“丰田”]，如何将其设置为自动增量；hvalue=[“运动型”、“豪华型”、“高级型”、“混合型”]；我想你应该先派宝马，然后是沃尔沃，然后是萨博，然后是丰田。尝试让hiddenInput.name=hname[index]和hiddenInput.value=hvalue[index]，然后在每次调用函数时递增index（如果调用次数超过一定数量（即数组长度，在本例中为4），则会得到一个越界错误数组）。