在循环内按一下按钮即可创建多个元素（输入）

Question

我的目标是拥有包含开始输入的表单，如果按下旁边的“ +”按钮，它将在其下方创建另一个输入。所有这些输入最终将插入到AJAX中。

现在我的表单位于PHP foreach循环中，因此我有多个表单，每个表单都有自己的一组输入和按钮。

如果我单击每个表单中的“ +”按钮，它将在下面创建一个新的输入，但是我尝试将每个表单限制为10个输入的方式将遍历所有这样的表单：

因此，在该图像中，我单击了第一个表格的“ +”按钮3次（直到第4项），然后在下一个提供第5项的表格中按了它。

该功能基本上在这里起作用，但是我需要每个表单都具有自己的输入（最多10个）。这样，如果它们以任何形式保存项目，则我只能将这些输入传递给AJAX。

<form id="Items" method="post">

   <label id="ItemLabel">Item 1:</label>
   <input type="text" name="Items[]"><br/>
   <button type="button" class="moreItems_add" onclick="moreItems(this);">+</button>

    <input type="hidden" name="tickerID" id="tickerID" value="xyz">
    <input type="submit" name="saveTickerItems" value="Save Ticker Items">  

</form>

<!-- ticker modal JS -->
<script type="text/javascript">

var maxItems = 1;

function moreItems(button) {
  if (maxItems < 10) {
    var label = document.createElement("label");
    label.id="ItemLabel"+maxItems;
    label.innerHTML = "Item "+(maxItems+1)+": ";
    var input = document.createElement("input");
    input.type='text';
    input.name = 'item'+maxItems;

    $($(label)).insertBefore($(button));
     $($(input)).insertBefore($(button));
     //Insert a line break so that the next label and input are on new line
     $('<br/>').insertBefore($(button));
    maxItems++;
  }
}

</script>

Answer 1

您正在使用全局变量作为计数器，因此每种形式的每次使用都会使它递增。为什么不让按钮检查表格中的内容并进行计数呢？而当您使用它时，最好还是使用完整的jQuery。

$("button.moreItems_add").on("click", function(e) {
  var numItems = $("input[type='text']", $(this).closest("form")).length;
  if (numItems < 10) {
    var html = '<label class="ItemLabel">Item ' + (numItems + 1) + ': </label>';
    html += '<input type="text" name="Items[]"/><br/>';
    $(this).before(html);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="Items" method="post">
   <label class="ItemLabel">Item 1:</label>
   <input type="text" name="Items[]"><br/>
   <button type="button" class="moreItems_add">+</button>
   <input type="hidden" name="tickerID" id="tickerID" value="xyz">
   <input type="submit" name="saveTickerItems" value="Save Ticker Items">
</form>

您还按顺序命名了文本输入，我认为这是一个错误？

Answer 2

这是对代码进行几处修改后的解决方案。

function moreItems(button) {
    var maxItems = Number(button.attributes.cnt.value);
    maxItems += 1;
    button.setAttribute("cnt", maxItems);
    if (maxItems < 10) {
      var label = document.createElement("label");
      label.id = "ItemLabel" + maxItems;
      label.innerHTML = "Item " + (maxItems + 1) + ": ";
      var input = document.createElement("input");
      input.type = 'text';
      input.name = 'item' + maxItems;

      $($(label)).insertBefore($(button));
      $($(input)).insertBefore($(button));
      $('<br/>').insertBefore($(button));
    }
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="Items" method="post">
  <label id="ItemLabel">Item 1:</label>
  <input type="text" name="Items[]"><br/>
  <button type="button" cnt="0" class="moreItems_add" onclick="moreItems(this);">+</button>
  <input type="hidden" name="tickerID" id="tickerID">
  <input type="submit" name="saveTickerItems" value="Save Ticker Items">
</form>

<br><br>

<form id="Items" method="post">
  <label id="ItemLabel2">Item 1:</label>
  <input type="text" name="Items[]"><br/>
  <button type="button" cnt="0" class="moreItems_add" onclick="moreItems(this);">+</button>
  <input type="hidden" name="tickerID" id="tickerID2">
  <input type="submit" name="saveTickerItems" value="Save Ticker Items">
</form>

所做的更改：

• 在此处+的每个cnt="0"按钮中添加自定义属性。
• 在moreItems()函数中，相应表单的cnt按钮的+的增量值。