當沒有重新加載按鈕時，將HTML表單字段添加到現有表單中

我發現了很多JavaScript谷歌搜索的例子。但是，他們都沒有爲我工作。當沒有重新加載按鈕時，將HTML表單字段添加到現有表單中

我想實現一個相對簡單的任務：通過在表單中按下添加字段按鈕，應該顯示第二個選擇字段。這應該無限期地繼續下去。由於我已經在使用jQuery庫，我寧願在這裏也使用它。

一旦按下添加字段按鈕，頁面就不會重新加載。

2012-03-09 Daniel Klose

檢出樣品How to hide, show, or toggle your div。

2012-03-09 08:21:37 dankyy1

謝謝，這裏有一些很好的例子。也許這是有道理的，不要無限期地與新的領域，但限制到10左右。謝謝。順便說一句，這是一個涵蓋jquery http：//www.randomsnippets的更新。com/2011/04/10/how-to-hide-show-or-toggle-your-div-with-jquery/ – 2012-03-09 08:27:24

嘗試after()，append()和appendTo()方法（見Category: Manipulation）。

來源

2012-03-09 08:20:54 Patrick

我猜這個問題是基於問題中的一些關鍵字，是表單在單擊按鈕時發佈。 – Anthony 2012-03-09 08:22:48

該問題應該通過使用「常規」按鈕來解決，而不是提交按鈕。或用'event.preventDefault（）'捕獲標準行爲（發佈表單）。 – Patrick 2012-03-09 08:51:37

使用append方法可以簡化腳本編寫。但是，如果您想在更嚴格的基礎上執行此操作，請閱讀DOM腳本。

請參見：

Tinker here
延伸閱讀：How to dynamically add form elements via JavaScript

來源

2012-03-09 08:24:24

非常感謝！ – 2012-03-09 08:29:28

這是很容易做到的。要麼你添加了新的元素，像這樣：

$("form").append($('<input type="text">');

或者，你已經把形式的HTML，但使其與CSS無形的，然後表現出來，就像這樣：

<form> 
    <input type="text" class="hidden"> 
</form> 

$("#theNewField").removeClass('hidden');

來源

2012-03-09 08:24:57 ThomasM

var newSelectField = "<select><option>Option 1</option><option>Option 2</option></select>"; 

$("#formID").append(newSelectField); 

//make sure your button is not of type="submit" 
<input type="button" value="Add new field" />

來源

2012-03-09 08:32:27 dmc

沒有示例代碼，我只能猜測問題是什麼，但它聽起來像你正在使用提交輸入，而不是按鈕輸入，這是導致您的表單提交和頁面重新加載，而不是隻是觸發「添加元素「功能。如果是這樣的話，這裏是做什麼：

更改添加按鈕，看起來像：

<input type="button" id="addOption" value="Add" />

如果它不是已經到位，添加事件偵聽器在腳本中單擊該按鈕時：

$("#addOption").click (function(){ 
// Add stuff 
}):

按照Patrick關於jQuery操作方法的建議。

來源

2012-03-09 08:34:53 Anthony

當沒有重新加載按鈕時，將HTML表單字段添加到現有表單中

回答

相關問題