如何动态生成输入字段

有一次，我点击了提交按钮我想用“加号/ +”图标生成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

如何动态生成输入字段

回答

相关问题