使用Javascript：如何隐藏输入标签追加到一个表单提交按钮被点击？([removed] How

我有我想要追加到表单按钮被点击权当提交隐藏输入标签变量名和值。 我该如何去编码呢？

这里是我的代码：

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

我似乎无法得到它的工作。 请帮忙！ 提前致谢！

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

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

Answer 3:

这是行不通的，因为document.write只能同时加载页面时，试图在页面加载失败后使用它。

你可以用纯DOM脚本做，但我会建议使用DOM库像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>

文章来源: Javascript: How to append hidden input tag into a form when submit button is clicked?