Question

我有一个html表单，我想添加输入字段使用javascript。最初我在“body”下面有自己的输入字段，以下内容可以添加字段：

            // Create number input field
            var phoneInput = document.createElement("INPUT");
            phoneInput.id = "phone" + instance;
            phoneInput.name = "phone" + instance;
            phoneInput.type = "text";

            // Insert that stuff
            document.body.insertBefore(document.createElement("BR"), element);
            document.body.insertBefore(phoneLabel, element);
            document.body.insertBefore(phoneInput, element);

然后我在html文件中的原始输入周围添加了一个'form'元素。

    <body>
    <form action=searchform.php method=GET>
        <LABEL for="phone1">Cell #: </LABEL>
        <input id="phone1" type="text" name="phone1">
        <input type="button" id="btnAdd" value="New text box" onclick="newTextBox(this);" />
    </form>
    </body>

现在按钮不会添加新文本框。我是否错误地构建了这个？谢谢！

Answer 1

这是因为您要将元素附加到正文，这意味着insertBefore无法找到element（因为它位于<form>，而不是<body>），所以它永远不会插入。

解决此问题的快速方法是使用document.body.firstChild.insertBefore。但是，如果表单不再是body中的第一个元素，则不再有效。

更简洁，更好的方法是为您的表单提供ID（例如<form id="myform">），然后使用：document.getElementById("myform").insertBefore访问该表单。然后，您可以将表单放在任何位置，并且仍然可以使用ID访问它。

Answer 2

Gve表单为id

<form id="myForm" action="searchform.php" method="GET">

像以前一样创建JavaScript元素，然后你可以像这样添加元素：

var f = document.getElementById('myForm');
f.appendChild(document.createElement('br'));
f.appendChild(phoneLabel);
f.appendChild(phoneInput);

（insertbefore也适用于f，虽然我认为这更具可读性。）

Answer 3

最简单的方法是使用jQuery。在表单中添加ID，以便于参考：

<form id="myform" action="action" method="GET">
  <input type="hidden" name="a" value="1"/>
  <input type="hidden" name="b" value="2"/>
</form>

<script type="text/javascript">
  $("#myform").append('<input type="hidden" name="c" value="3"/>');
</script>

您可以稍后通过轻松引用来更改新输入的值：

$("#myform input[name='c']").val(7);

使用javascript将输入添加到html表单

3 个答案: