使用隐藏的输入类型向表单操作添加参数
Posted
技术标签:
【中文标题】使用隐藏的输入类型向表单操作添加参数【英文标题】：Adding argument to form action using input type hidden 【发布时间】：2016-06-20 19:15:41 【问题描述】：如何使用 input type="hidden" 在表单操作中添加参数。 我的 html sn-p...
<form id="form1">
<input type="text" name="txt"/>
<input type="hidden" name="usID" value=123/>
<input type="hidden" name="usname" value="name1"/>
<input type="submit" onclick="add()" value="ADD"/>
</form>
我的 javascript sn-p...
function add()
document.getElementsByName('usID').value=789;
document.getElementsByName('usname').value="name2";
document.getElementById('form1').action = "/page";
document.getElementById('form1').submit();
在文本框中输入“文本”并按添加后，链接如下所示... http://localhost:3000/page?txt=text&usID=123&usname=name1
为什么 usID 和 usname 没有分别改为 789 和 "name2"？ 如果不是这个，还有其他选择吗？
【问题讨论】：
【参考方案1】：getElementsByName 将返回一组 html 元素 (NodeList)，而不是单个 html 元素。意味着返回值没有value 属性会改变输入。您需要给他们一个id 并使用getElementById 找到他们，然后更改值，或者获取您收藏的第一个元素
document.getElementsByName('usname')[0].value="name2";
或（首选方式）
<input type="hidden" name="usname" value="name1" id="usname"/>
function add()
document.getElementById('usname').value="name2";
...
虽然我不得不问，您是否有理由像这样更改隐藏字段元素？
【讨论】：
基本上我必须在表单操作中从数据库中传递值。我有这样的误解，如果我们最初在<input> 中添加值，那么只有我们以后才能添加/修改它的值。其次，我现在意识到 name 的值构成了链接的一个组成部分，而不是 id 的值。感谢您的帮助！【参考方案2】：
这对你有帮助：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
function add()
var usID = document.forms["frm"]["usID"];
var usname = document.forms["frm"]["usname"];
usID.value=789;
usname.value="name2";
document.getElementById('form1').action = "/page";
document.getElementById('form1').submit();
</script>
<h3>Please select the <span>first letter</span> of your <span>last name</span>: </h3>
<form id="form1" name="frm">
<input type="text" name="txt"/>
<input type="hidden" name="usID" value=123/>
<input type="hidden" name="usname" value="name1"/>
<input type="submit" onclick="add()" value="ADD"/>
</form>
</body>
</html>
【讨论】：
是的，这有帮助。我在通过document.getElementsByName 方法访问元素时犯了错误。谢谢！以上是关于使用隐藏的输入类型向表单操作添加参数的主要内容，如果未能解决你的问题，请参考以下文章
保护旧的 Web 应用程序免受 CSRF 攻击，而无需在所有表单中添加隐藏输入