Javascript：单击提交按钮时如何将隐藏的输入标签附加到表单中？

Posted 2023-02-22

【中文标题】Javascript：单击提交按钮时如何将隐藏的输入标签附加到表单中？

【英文标题】：Javascript: How to append hidden input tag into a form when submit button is clicked?

【发布时间】：2013-02-23 09:42:07

【问题描述】：

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

这是我的代码：

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

我似乎无法让它工作。

【问题讨论】：

永远不要使用document.write，除非您使用时间机器将此代码发送回 1996...

【参考方案1】：

试试这个：

<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 等于数组，我该如何设置它为自动递增： hname=["BMW","Volvo","Saab","Toyota"]; hvalue=["Sports","Luxury","Premium","Hybrid"];

我猜你想先派宝马，然后是沃尔沃，然后是萨博，然后是丰田。尝试使用 hiddenInput.name = hname[index] 和 hiddenInput.value = hvalue[index] 然后每次调用函数时递增索引（如果调用它超过一定次数（即数组的长度），请小心, 在这种情况下 4) 那么你会得到一个数组越界错误)。

【参考方案2】：

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

【参考方案3】：

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

您可以使用纯 DOM 脚本来完成，但我建议使用像 jQuery 这样的 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>