Javascript 向html表单动态添加一组输入

我目前正在创建一个HTML表单，我有一个包含8个文本输入的部分。这是迄今为止的部分：

<div class="form-title"><h3>Clinical Information</h3></div>
    <div class="form-title">Time Assesed:</div>
    <input class="form-field" type="time" name="timeassessd" /><br />
    <div class="form-title">Blood Pressure:</div>
    <input class="form-field" type="text" name="bp" /><br />
    <div class="form-title">Pulse:</div>
    <input class="form-field" type="date" name="pulse" /><br />
    <div class="form-title">Resp. Rate:</div>
    <input class="form-field" type="text" name="breathing" /><br />
    <div class="form-title">Temp:</div>
    <input class="form-field" type="text" name="temp" /><br />
    <div class="form-title">SPO2:</div>
    <input class="form-field" type="text" name="spo2" /><br />
    <div class="form-title">GCS:</div>
    <input class="form-field" type="text" name="gcs" /><br />
    <div class="form-title">AVPU:</div>
    <input class="form-field" type="text" name="avpu" /><br />

临床信息
估计时间：


血压：


脉搏：


分别。费率：


临时雇员：


血氧饱和度：


地面军事系统：


AVPU：

---

我需要的是有一个按钮，当用户按下按钮时，它将创建与上面相同的另一个部分，将字段添加到表单中。每个表单的名称末尾还需要一个数字。我看了不同的论坛，但我找不到一个有一个完整的部分来添加个人输入，这对我没有帮助。谢谢

您需要创建一个JS函数来添加节。该函数将如下所示：

function add_section() {
        new_row = "";
        new_row += "";
        new_row += '<div class="form-title"><h3>Clinical Information</h3></div>';
        new_row += '<div class="form-title">Time Assesed:</div>';
        new_row += '<input class="form-field" type="time" name="timeassessd" /><br />';
        new_row += '<div class="form-title">Blood Pressure:</div>';
        new_row += '<input class="form-field" type="text" name="bp" /><br />';
        new_row += '<div class="form-title">Pulse:</div>';
        new_row += '<input class="form-field" type="date" name="pulse" /><br />';
        new_row += '<div class="form-title">Resp. Rate:</div>';
        new_row += '<input class="form-field" type="text" name="breathing" /><br />';
        new_row += '<div class="form-title">Temp:</div>';
        new_row += '<input class="form-field" type="text" name="temp" /><br />';
        new_row += '<div class="form-title">SPO2:</div>';
        new_row += '<input class="form-field" type="text" name="spo2" /><br />';
        new_row += '<div class="form-title">GCS:</div>';
        new_row += '<input class="form-field" type="text" name="gcs" /><br />';
        new_row += '<div class="form-title">AVPU:</div>';
        new_row += '<input class="form-field" type="text" name="avpu" /><br />';

        var pos = $("selecter"); //element selecter after which you need to add the section
        $(pos).after(new_row);
}

函数添加_节（）{
新_row=“”；
新的_行+=“”；
新_行+=‘临床信息’；
新的_行+='评估的时间：'；
新的_行+='
'；
新的_行+=“血压：”；
新的_行+='
'；
新的_行+='脉冲：'；
新的_行+='
'；
新的_行+='响应速率：'；
新的_行+='
'；
新的_行+='Temp:'；
新的_行+='
'；
新的_行+=“SPO2:”；
新的_行+='
'；
新的_行+=“GCS:”；
新的_行+='
'；
新的_行+=“AVPU:”；
新的_行+='
'；
var pos=$（“selector”）；//元素选择器，之后需要添加节
美元（位置）。之后（新行）；
}

然后点击按钮，调用这个函数。它会起作用的

此外，输入字段的名称应为数组ex:

name=“avpu[]”

---

如果不使用数组，post方法将只获取具有相同名称的最后一个输入元素的值。

能否发布整个表单

如果使用jQuery，您可以做的是克隆表单的jQuery节点，然后操作输入名称，然后将内容附加到表单中。
诸如此类：

var num = 1;
function add_form_elements(num) {
   var clonedForm = $('#id_of_the_form').clone();
   clonedForm.find('input').each(function(id, elm) {
     elm.attr("name",elm.attr("name") + num);
   });
   $('#id_of_the_form').append(clonedForm.innerHTML);
   num++;
});

---

然后，您需要将EventListener添加到按钮中，并将add_form_elements函数绑定到该按钮。

创建新的div，该div是您想要复制的内容，并且是不可见的

<div class="copyable" style="display: none;">
  <div class="form-title"><h3>Clinical Information</h3></div>
  <div class="form-title">Time Assesed:</div>
  <input class="form-field" type="time" name="timeassessd" /><br />
  <div class="form-title">Blood Pressure:</div>
  <input class="form-field" type="text" name="bp" /><br />
  <div class="form-title">Pulse:</div>
  <input class="form-field" type="date" name="pulse" /><br />
  <div class="form-title">Resp. Rate:</div>
  <input class="form-field" type="text" name="breathing" /><br />
  <div class="form-title">Temp:</div>
  <input class="form-field" type="text" name="temp" /><br />
  <div class="form-title">SPO2:</div>
  <input class="form-field" type="text" name="spo2" /><br />
  <div class="form-title">GCS:</div>
  <input class="form-field" type="text" name="gcs" /><br />
  <div class="form-title">AVPU:</div>
  <input class="form-field" type="text" name="avpu" /><br />
</div>

---

注意：append用于在父节点内追加html。如果您想在其他elm之后添加html，只需在上述代码末尾使用

之后（内容）

。

解决问题的一种方法是使用纯JavaScript（请记住，这确实需要更改html，因为包含要复制的

元素的部分需要一个类名（这里是

“clinicalInformation”

，但请根据您自己的要求进行调整-记住更改

元素的

数据副本属性中的选择器）：


功能重复（事件）{
event.preventDefault（）；
var allCurrent=Array.prototype.slice.call（document.querySelectorAll（this.dataset.duplicates），0），
toClone=allCurrent[allCurrent.length-1]，
clone=toClone.cloneNode（真），
reg=/\d+$/,，
儿童；
allCurrent.push（克隆）；
allCurrent.forEach（函数（字段集，索引）{
childElems=fieldset.querySelectorAll（“[name]”）；
Array.prototype.forEach.call（childElems，function（elem）{
elem.name=reg.test（elem.name）？elem.name.replace（reg，index）：elem.name+index；
});
toClone.parentNode.insertBefore（克隆，toClone.nextSibling）；
});
}
var addMore=document.getElementById（'duplicate'）；
addMore.addEventListener（'单击'，复制）
标签{
显示：块；
}

临床信息
估计时间：
血压：
脉搏：
相应费率：
临时雇员：
血氧饱和度：
地面军事系统：
AVPU：
添加更多
您的jquery工作在哪里？
function add_elm(){
  var content = $('.copyable').html(),
      $elm = $('.elm'); //element where you want to add copyable content
  $elm.append(content);
}

// the event is passed automagically from the addEventListener()
// method:
function duplicate(event) {
  // preventing the clicked-element's default behaviour
  // (which in many cases could cause a page reload):
  event.preventDefault();

  // using Array.prototype.slice, with Function.prototype.call,
  // on the NodeList returned by document.querySelectorAll(),
  // to create an array of element nodes;
  // 'this.dataset.duplicates' retrieves the attribute-value from
  // the 'data-duplicates' attribute of the clicked element:
  var allCurrent = Array.prototype.slice.call(document.querySelectorAll(this.dataset.duplicates), 0),
    // getting the last element from the array of nodes:
    toClone = allCurrent[allCurrent.length - 1],

    // cloning that node, including its child elements:
    clone = toClone.cloneNode(true),

    // creating a RegExp (regular expression) literal,
    // to match a sequence of one, or more, numbers (\d+)
    // followed by the end of the string ($):
    reg = /\d+$/,

    // creating an 'empty'/unitialised variable for use
    // within the (later) loop:
    childElems;

  // adding the created clone to the allCurrent array:
  allCurrent.push(clone);

  // using Array.prototype.forEach() to iterate over the
  // array, the arguments (names are user-defined):
  // - first (here 'fieldset') is the current array element
  //   over which we're iterating,
  // - second (here 'index') is the index of the current
  //   array element in the array:
  allCurrent.forEach(function(fieldset, index) {

    // finding all descendant elements contained within
    // the current array-element that have a 'name' attribute,
    // using a CSS attribute-selector within
    // document.querySelectorAll():
    childElems = fieldset.querySelectorAll('[name]');

    // iterating over those descendant elements in the
    // array-like NodeList:
    Array.prototype.forEach.call(childElems, function(elem) {

      // if the regular expression matches the name (
      // RegExp.prototype.test() returning a Boolean true/false
      // based on the string matching, or not matching, the
      // regular expression) we replace that match with the index
      // (from the outer loop), or if not we simply append the
      // index to the current name property-value:
      elem.name = reg.test(elem.name) ? elem.name.replace(reg, index) : elem.name + index;
    });

    // navigating from the cloned node to its parent and, using
    // Node.insertBefore(), we insert the created clone before
    // the nextSibling of that cloned node:
    toClone.parentNode.insertBefore(clone, toClone.nextSibling);
  });

}

// getting a reference to the element that should trigger
// the duplication:
var addMore = document.getElementById('duplicate');

// adding an event-handler for the 'click' event
// (note the lack of parentheses):
addMore.addEventListener('click', duplicate)