如何動態生成輸入字段

有一次，我點擊了提交按鈕我想用「加號/ +」圖標生成2個輸入字段。所以，當我點擊「+」圖標時，它會生成輸入字段。

這裏是HTML的一部分：

<label>Name</label> 
<input type="text" value="Jim" id="demo_1" name="demo_name" class="input-medium"/> 
<label>Id</label> 
<input type="text" value="123" id="demo_1" name="demo_name" class="input-medium"> 

<button id="demo_submit" class="btn" name="demo_submit" type="button">Submit</button>

來源

2014-02-23 user3340300

你試過了什麼？你不明白什麼？你問如何處理事件？如何創建新的元素？ – SLaks

我不能讓你.. – user3340300

在http://plnkr.co/edit/szYoU4GCeLWX8b9DcsYT

<script type="text/javascript"> 
    function addFields() { 
    var newNode1 = document.createElement('input'), 
    newNode2 = document.createElement('input'); 
    newNode1.type = newNode2.type = "text"; document.forms[0].appendChild(newNode1); 
    document.forms[0].appendChild(newNode2); 
    } 
</script> 
    <form> 
    <label>Name</label> 
    <input type="text" value="Jim" id="demo_1" name="demo_name" class="input-medium"/> 
    <label>Id</label> 
    <input type="text" value="123" id="demo_1" name="demo_name" class="input-medium"> 

    <button id="demo_submit" class="btn" name="demo_submit" type="button" onclick="addFields()">Submit</button> 
</form>

來源

2014-02-23 16:48:38 hariom

這就是我要找的。但是，我需要第一個值爲Jim和123的字段在單擊sumbit後被禁用。 – user3340300

您可以做 document.getElementById（'demo_1'）。disabled = true; 使用它來了解更多。 http://stackoverflow.com/questions/2874688/how-to-disable-an-input-type-text-with-javascript – hariom

感謝您的信息.. – user3340300

$（「addInput 」）點擊（函數{。 $（「形式」）追加（PUT INPUT ELEMNT HERE）; }）;

來源

2014-02-23 16:45:11

我可以基於我的代碼工作演示，因爲我是一個新手.. – user3340300

這不是學習的方式，但是，因爲你是新的，我會盡力幫助你。 http://jsfiddle.net/Yene/J7fLY/檢查鏈接 –

工作的例子，我建議看一下現有的插件（例如 - jQuery的SheepIt插件），看看是如何編碼的。

動態地添加形成元件這可以與clone（）方法和的DocumentFragment做 - http://ejohn.org/blog/dom-documentfragments/

來源

2014-02-23 16:50:32 JohanVdR

Check this out.
HTML

<label>Name</label> 
<input type="text" value="Jim" id="demo_1" name="demo_name" class="input-medium" /> 
<label>Id</label> 
<input type="text" value="123" id="demo_1" name="demo_name" class="input-medium"> 
<button id="demo_submit" class="btn" name="demo_submit" type="button">Submit</button> 
<button id="demo_add" class="btn" name="demo_add" type="button">Add more</button> 
<div id='add'></div>

的jQuery

$('#demo_add').click(function() { 
    $inputName = "<input type='text' placeholder='Name'/>"; 
    $inputId = "<input type='text' placeholder='Id'/>"; 
    $br = "<br/>"; 
    $('#add').append($inputName); 
    $('#add').append($inputId); 
    $('#add').append($br); 
});

希望它有幫助。

來源

2014-02-23 16:53:53 Bhavik

一旦提交被點擊我想第一個字段被禁用所以我們無法改變輸入.. – user3340300

** [檢查更新在這裏]（http://jsfiddle.net/p5b9p/1/）** – Bhavik

如何動態生成輸入字段

回答

相關問題