動態添加表單中的文本字段

我有一個類似於以下的表單，我希望當用戶填寫輸入文本時，然後自動添加另一個輸入文本，並繼續執行此操作。動態添加表單中的文本字段

的HTML的例子是：

<form method="post" action="http://localhost/save" class="save"> 
<fieldset> 

    <div> 
    <label>Text 1:</label><br> 
    <input type="text" value="" name="text1" id="text" class="input-tags"> 
    </div> 

    <div> 
    <label>Text 2:</label><br> 
    <input type="text" value="" name="text2" id="text" class="input-tags"> 
    </div> 

    <div> 
    <input type="submit" value="Save" class="elgg-button elgg-button-submit"> 
    </div><!-- developers:end forms/application_description/save --> 
</fieldset> 
</form>

如何用jQuery做到這一點？

所以，用少說話的問題是：只有當text1填充時，我如何才能顯示text2？

來源

2013-10-03 Christos Papoulas

是的，你可以動態字段添加到窗體或HTML的全幅的選擇。您需要查看的jQuery函數是prepend，prependTo，append或appendTo。他們都以略有不同的方式做基本相同的事情。

您可以使用創建的文本字段的計數來保留一個變量，並在每次添加文本字段時增加它。如果你添加一個id屬性給你的div，它會更容易。例如，在格周圍的提交按鈕，你加入一個這樣的ID：

<div id="submit-div">

你可以這樣說：

function addField() { 
    n++; 
    '<div><label>Text ' + n + ': </label><input type="text" name="text' + n + '" class="input-tags"></div>'.prependTo('#submit-div'); 
}

如何，當你調用這個函數是你的，但你可以將其附加到最後一個輸入字段的模糊事件。然後當你創建新的時候，你可以從前面的輸入字段中刪除事件處理程序。

來源

2013-10-03 13:26:02 andrunix

這樣的事情會工作。它相當粗糙但經過測試，並且工作正常

$(document).ready(function(){ 
    $("#testForm").append($("<input type='text'/>")); 

    $("#testForm").on("blur", 'input', function(){ 
     $("#testForm").append($("<input type='text'/>")); 
    }); 
});

繼承人鏈接到我的小提琴。你可以分支並玩一玩。

http://jsfiddle.net/ricobano/bxEAb/

來源

2013-10-03 13:19:42

您向我展示了正確的道路！謝謝 –

動態添加表單中的文本字段

回答

相關問題