Question

我目前正在创建一个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 />

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

Answer 1

您需要创建一个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);
}

然后点击按钮，调用此功能。它会起作用。

输入字段的名称也应该是ex：name="avpu[]"的数组如果不使用数组，post方法只会获得具有相同名称的最后一个输入元素的值。

Answer 2

你能发表整个表格吗？

如果您使用的是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函数绑定到它。

Answer 3

制作新的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>

在JS文件中：

function add_elm(){
  var content = $('.copyable').html(),
      $elm = $('.elm'); //element where you want to add copyable content
  $elm.append(content);
}

注意：追加用于在父节点中附加html。如果你想在其他榆树之后添加html，只需在上面的代码末尾使用after(content)。

Answer 4

使用普通JavaScript解决问题的一种方法如下（请记住，这确实需要更改HTML，因为包含要复制的<input>元素的部分需要使用类名（这里是"clinicalInformation"，但根据您自己的要求进行调整 - 记住要更改<button>元素'data-duplicates属性中的选择器）：

// 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)

function duplicate(event) {
  event.preventDefault();
  var allCurrent = Array.prototype.slice.call(document.querySelectorAll(this.dataset.duplicates), 0),
    toClone = allCurrent[allCurrent.length - 1],
    clone = toClone.cloneNode(true),
    reg = /\d+$/,
    childElems;

  allCurrent.push(clone);
  
  allCurrent.forEach(function(fieldset, index) {
    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(clone, toClone.nextSibling);
  });

}

var addMore = document.getElementById('duplicate');

addMore.addEventListener('click', duplicate)

label {
  display: block;
}

<!-- here we're using an actual <form> element -->
<form action="#" method="post">
  <!-- using a fieldset to group the related fields together -->
  <fieldset class="clinicalInformation">
    <!-- the <legend> element semantically titles that group
         of related fields -->
    <legend class="form-title">
      Clinical Information
    </legend>

    <!-- the <label> semantically associates a text-label
         with a specific form-element; that form-element
         (<input />, <textarea>, <select>) can appear within
         the <label>, or the <label> can have a 'for' attribute
         equal to the 'id' of the associated element. -->
    <label class="form-title">Time Assesed:
      <input class="form-field" type="time" name="timeassessd" />
    </label>
    <label class="form-title">Blood Pressure:
      <input class="form-field" type="text" name="bp" />
    </label>
    <label class="form-title">Pulse:
      <input class="form-field" type="date" name="pulse" />
    </label>
    <label class="form-title">Resp. Rate:
      <input class="form-field" type="text" name="breathing" />
    </label>
    <label class="form-title">Temp:
      <input class="form-field" type="text" name="temp" />
    </label>
    <label class="form-title">SPO<sub>2</sub>:
      <input class="form-field" type="text" name="spo2" />
    </label>
    <label class="form-title">GCS:
      <input class="form-field" type="text" name="gcs" />
    </label>
    <label class="form-title">AVPU:
      <input class="form-field" type="text" name="avpu" />
    </label>
  </fieldset>
  <fieldset>
    <button id="duplicate" data-duplicates=".clinicalInformation">Add more</button>
  </fieldset>
</form>

然而，使用jQuery，因为您已经将该标记用于您的问题：

// binding an anonymous click event-handler, using on():
$('#duplicate').on('click', function(event) {
  // preventing the default action:
  event.preventDefault();

  // finding all elements that match the selector from
  // the clicked-element's 'data-duplicates' attribute:
  var allCurrent = $(this.dataset.duplicates),

    // finding the last of those elements:
    toClone = allCurrent.last(),

    // creating the clone, including the child elements:
    clone = toClone.clone(true),

    // the regular expression (as above):
    reg = /\d+$/;

  // adding the clone to the 'allCurrent' collection,
  // then iterating over them with each(), getting a
  // reference to the index of each element in the collection:
  allCurrent.add(clone).each(function(index) {

    // finding all descendant elements that have a name attribute,
    // updating the 'name' property of each of those found
    // elements using prop():
    $(this).find('[name]').prop('name', function(i, n) {
      // the first argument (here: 'i') is the index of the
      // current element in the collection,
      // the second (here: 'n') is the current value of the
      // current element's property.

      // exactly the same as above:
      return reg.test(n) ? n.replace(reg, index) : n + index;
    });
  });

  // inserting the clone into the document
  // after the toClone element:
  clone.insertAfter(toClone);
});

$('#duplicate').on('click', function(event) {
  event.preventDefault();

  var allCurrent = $(this.dataset.duplicates),
    toClone = allCurrent.last(),
    clone = toClone.clone(true),
    reg = /\d+$/;

  allCurrent.add(clone).each(function(index) {
    $(this).find('[name]').prop('name', function(i, n) {
      return reg.test(n) ? n.replace(reg, index) : n + index;
    });
  });

  clone.insertAfter(toClone);
});

label {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="post">
  <fieldset class="clinicalInformation">
    <legend class="form-title">
      Clinical Information
    </legend>

    <label class="form-title">Time Assesed:
      <input class="form-field" type="time" name="timeassessd" />
    </label>
    <label class="form-title">Blood Pressure:
      <input class="form-field" type="text" name="bp" />
    </label>
    <label class="form-title">Pulse:
      <input class="form-field" type="date" name="pulse" />
    </label>
    <label class="form-title">Resp. Rate:
      <input class="form-field" type="text" name="breathing" />
    </label>
    <label class="form-title">Temp:
      <input class="form-field" type="text" name="temp" />
    </label>
    <label class="form-title">SPO<sub>2</sub>:
      <input class="form-field" type="text" name="spo2" />
    </label>
    <label class="form-title">GCS:
      <input class="form-field" type="text" name="gcs" />
    </label>
    <label class="form-title">AVPU:
      <input class="form-field" type="text" name="avpu" />
    </label>
  </fieldset>
  <fieldset>
    <button id="duplicate" data-duplicates=".clinicalInformation">Add more</button>
  </fieldset>
</form>

参考文献：

CSS：
- Attribute-selectors。
HTML：
- Embedding custom non-visible data with the data-* attributes。
- <fieldset>。
- <label>。
- <legend>。
- Using data attributes。
JavaScript的：
- Array.prototype.forEach()。
- Array.prototype.slice()。
- document.querySelectorAll()。
- Event.preventDefault()。
- EventTarget.addEventListener()。
- Function.prototype.call()。
- Guide to JavaScript regular expressions。
- HTMLElement.dataset。
- Node.cloneNode。
- Node.insertBefore。
- Node.parentNode。
- RegExp。
- RegExp.prototype.test()。
- String.prototype.replace()。
jQuery的：
- add()。
- clone()。
- each()。
- find()。
- insertAfter()。
- last()。
- on()。
- prop()。

动态添加输入到html表单

4 个答案: