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

我有一个html表单，我想添加输入字段来使用javascript。本来我自己有输入字段的“身体”的下面，其次为能够添加字段：将输入添加到html表单，使用javascript

  // 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文件中添加了一个“形式”元素周围原来的输入。

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

现在按钮不会添加新的文本框。我的结构是否有误？谢谢！

来源

2009-12-23 Matt

这是因为，要附加元素的身体，这意味着insertBefore找不到element（因为它是在<form>，而不是<body>），所以它永远不会被插入。

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

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

来源

2009-12-23 08:00:25

嗯，柜面身体有很多更孩子，有没有一种方法，我可以用一个ID标签的形式，然后有insertBefore指向呢？谢谢。 – Matt

没有看到答复的其余部分。谢啦！ – Matt

不客气！ –

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上班好吧，虽然我认为这样更具可读性。）

来源

2009-12-23 08:04:20

最简单的就是使用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);

来源

2009-12-23 08:04:20

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

回答

相关问题