javascript - 按钮将输入添加到表单，但仅限第一个。不在多个表单/div 上

Question

我被困在这里了。

我在下面有一个“工作”函数(对于每个 PHP 数组行，我正在使用表单创建一个 div。该表单有一个空输入、一个“+”按钮和一个提交按钮)。

使用第一个表单/div，如果我单击“+”按钮，它每次都会添加一个输入字段，最多 10 个，这正是我想要的。

但是，当我在第二个、第三个或第四个表单上执行此操作时，它会添加输入，但所有输入都添加到第一个表单中。因此，如果我单击表单 2 上的“+”按钮，它会向表单 1 添加一个输入。我知道这与具有非唯一按钮 id 并通过我的表单输入携带该 ID 有关，但我完全陷入困境在这里做。

我需要每个表单/div 都有自己独立的字段、“+”按钮和提交按钮。原因是，我将向提交按钮添加一个 AJAX 调用，该按钮将提交给定表单的任何添加的输入值(使用此处给出的股票代码 ID `

`<?php echo $ticker['ticker'] ?>``) .

如何修复此功能以在任何给定时间适用于尽可能多的 div/表单？

<div class="row">
    <?php foreach($tickerDisplays as $key => $ticker):?>
        <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="<?php echo $ticker['ticker'] ?>">
                            <input type="submit" name="saveTickerItems" value="Save Ticker Items">  
                    </form>
    <?php endforeach;?>
</div>


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

    $($(button).sibling('br')[0]).insertBefore($(button));
    $($(button).sibling('label')[0]).insertBefore($(button));
    $($(button).sibling('input:text')[0]).insertBefore($(button));
    maxItems++;
  }
}

</script>

Answer 1

Tom，HTML 元素的 id 属性需要是唯一的，始终确保使用唯一的 id，如果您想对大多数方面相似的元素执行某些操作，请使用类，旁注可以解决您的问题问题:

还将您的 Html 更改为此(将按钮传递到函数中)另外，我将您的 id 更改为 moreItems_add 类，并完全删除了 id:

<button type="button" class="moreItems_add" onclick="moreItems(this);">+</button>


//Accepts the button object
function moreItems(button) {
   //Instead of using a global iterator, grab the number of siblings of input type text
  const currentInputs = $(button).siblings('input:text').length;
  //Now use this variable to check if we hit the max of ten
  if(currentInputs < 10){}

替换这些行:

    $('<br/>').insertBefore("#moreItems_add");
    $(label).insertBefore("#moreItems_add");
    $(input).insertBefore("#moreItems_add");

用这些行:

    //$(button) refers to the button which was clicked
    //.siblings() will check the node structure for element(s) with the given selector on the same level as the button
    //pass the jquery object of the button which was clicked into insertBefore()
    //Pass the newly created object into the line of code before calling .siblings
     //These 2 are inserting the new label and input
     $($(label)).insertBefore($(button));
     $($(input)).insertBefore($(button));
     //Insert a line break so that the next label and input are on new line
     $('<br/>').insertBefore($(button));