將輸入添加到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

回答

相關問題