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

我有，我要追加到形式的按钮被点击权当提交隐藏输入标签变量名和值。我如何去编码它？Javascript：如何在点击提交按钮时将隐藏的输入标签添加到表单中？

这里是我的代码：

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

我似乎无法得到它的工作。请帮忙！先谢谢了！

来源

2013-03-07 netizen0911

切勿使用'document.write'，除非您使用的是时间机器发送该代码的回到1996年... – 2013-03-07 23:35:10

试试这个：

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

来源

2013-03-08 00:09:48 eburgos

这一个似乎工作。谢啦！还有一个问题...我如何去了解它设置为自动增量，如果我有可变hname和hvalue等于阵列，如： hname =“宝马”，“沃尔沃”，“萨博”，“丰田”] ; hvalue = [“运动”，“豪华”，“高级”，“混合”]; – netizen0911 2013-03-08 01:08:23

我想你想先发送宝马，然后沃尔沃，然后是萨博，然后是丰田。尝试具有hiddenInput.name = hname [指数]和hiddenInput.value = hvalue [索引]，然后每次递增索引调用函数（如果你把它小心超过一定量的时间（即，阵列的长度，在这种情况下4）那么你会得到一个数组的出界错误）。 – eburgos 2013-03-08 02:31:26

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

来源

2013-03-07 23:38:56 rodneyrehm

这是行不通的，因为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>

来源

2013-03-07 23:51:43

回答

相关问题