Question

如何使用input type =“hidden”在表单操作中添加参数。我的HTML代码段......

<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代码段

function add()
{
document.getElementsByName('usID').value=789;
document.getElementsByName('usname').value="name2";

document.getElementById('form1').action = "/page";
document.getElementById('form1').submit();
}

在文本框中输入“text”并按ADD后，链接看起来像这样...... http://localhost:3000/page?txt=text&usID=123&usname=name1

为什么usID和usname分别没有变为789和“name2”？如果不是这样的话还有其他选择吗？

Answer 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";
  ...
}

虽然我不得不问，你有没有理由改变这样的隐藏字段元素？

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

使用隐藏的输入类型为表单操作添加参数

2 个答案: