如何動態添加其他字段

如何在設計時靜態添加元素，但不可見，然後在某些事件發生時動態顯示。在這種情況下，我使用代碼HTML這樣的如何動態添加其他字段

<input type="text" name="field_1"/> 
<input type="text" name="field_2"/> 
<input type="text" name="field_3"/> 
<input type="text" name="field_4" style="display:none"/> 
<input type="text" name="field_5" style="display:none"/> 
<a href="#">add another field</a>

，第一時間，field_4和field_5是看不見的吧？但是當我點擊「添加另一個字段」，那麼field_4和field_5應該是可見的。

是否有任何提示？

我不介意有人可以用PHP解決這個案例，也許這種情況就像FB，當你輸入你的聯繫信息（你的電話號碼），如果你只有1個數字，這意味着你不需要點擊「添加另一個手機「，但如果你有2個或更多的號碼，你可以點擊它，字段文本將出現多達你點擊。

來源

2013-02-19 Wandy Hanyudha

你可以因爲你不使用JavaScript這樣做（更有效」不需要提交頁面）。你熟悉JQuery嗎？ – 2013-02-19 13:10:48

document.getElementById('field_4').display = 'inline'

這應該適用於您的目的。

您可以在單擊按鈕時添加新元素，而不是顯示舊的不可見元素。

var index = 2; 
document.getElementById('addBtn').addEventListener('click', function() { 
    var inp = document.createElement('input') 
    inp.setAttribute('type', 'text') 
    inp.setAttribute('name', 'field_' + index) 
    document.insertBefore(inp, document.getElementById('addBtn')) 
    index ++; 
})

來源

2013-02-19 13:11:28 Doorknob

這會在鏈接後添加新元素。 – crush 2013-02-19 13:16:36

@crush哦忘了。現在更新 – Doorknob 2013-02-19 13:17:37

這是insertBefore的錯誤參數計數。 – crush 2013-02-19 13:18:38

首先，你不需要有那些隱藏的字段。這不是「動態添加它們」。

<input type="text" name="field_1"/> 
<input type="text" name="field_2"/> 
<input type="text" name="field_3"/> 
<a href="#">add another field</a>

接下來，告訴鏈接執行JavaScript函數單擊時：

<a href="javascript:void()" onclick="addField(e)">add another field</a>

寫您的javascript：

;(function) { 
    var counter = 3; //This is set to the number of initial fields. 

    function addField(e) { 
     e = e || window.event; //Normalize the event. 

     counter++; //Increment the counter. 

     //Create the new element. 
     var element = document.createElement("input"); 
     element.setAttribute("type", "text"); 
     element.setAttribute("name", "field_" + counter); 

     //Insert it before your link. 
     e.target.parentNode.insertBefore(element, e.target); 
    } 
})();

來源

2013-02-19 13:16:05 crush

如何動態添加其他字段

回答

相關問題