如何动态生成输入字段答案

【问题标题】：How to generate input fields dynamically如何动态生成输入字段
【发布时间】：2014-02-24 00:53:53
【问题描述】：

我有一个带有输入字段的表单。

有一次，我点击了提交按钮，我想生成 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>

【问题讨论】：

你试过什么？你不明白什么？你问如何处理事件？如何创建新元素？

标签： javascript jquery

【解决方案1】：

我建议看看现有的插件（例如 - Jquery SheepIt！插件），看看它是如何编码的。

要动态添加表单元素，可以使用 clone() 方法和 DocumentFragment - http://ejohn.org/blog/dom-documentfragments/

【讨论】：

【解决方案2】：

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>

【讨论】：

这就是我要找的。但是，一旦单击 sumbit，我需要禁用值为 Jim 和 123 的第一个字段..
你可以做 document.getElementById('demo_1').disabled=true;使用它来了解更多信息。 stackoverflow.com/questions/2874688/…

【解决方案3】：

$(".addInput").click(function { $("form").append(PUT INPUT ELEMNT HERE); });

【讨论】：

这不是学习的方法，但是，既然你是新人，我会尽力帮助你。 jsfiddle.net/Yene/J7fLY查看链接

【解决方案4】：

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);
});

希望对您有所帮助。

【讨论】：

单击提交后，我希望禁用第一个字段，因此我们无法更改输入..