按钮将输入添加到表单，但只有第一个。不在多个表单/div上

Question

我被困在这里了。

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

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

但是，当我在第 2、第 3 或第 4 个表单上执行此操作时，它会添加输入，但所有输入都会添加到第一个表单。因此，如果我单击表单 2 上的“+”按钮，它会向表单 1 添加一个输入。我知道这与具有非唯一按钮 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，如果您想为大多数方式相似的元素做一些事情，请使用 class，在旁注中解决您的问题问题：

还将您的 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));

Answer 2

您不能使用相同的 ID 来引用不同的 DOM 元素、使用类或带有后缀的 ID。

Answer 3

如果您调用 JavaScript 函数以应用于特定表单，则应改为调用具有适用于所有表单的类名的函数。不要使用 ID，而是使用类

Answer 4

ID 必须是唯一的。如果您通过附加票号“构建它们”怎么样？ 类似
id="<? php echo ("Items".$ticket) ?>"。然后就可以在js中获取元素的id，并酌情insertBefore。

对于按钮，应该是这样的：
<button type="button" id="<?php echo "moreItems_add".$ticker ?>" onclick="moreItems(this);">+</button>

对于表单元素也是如此： <form id="<?php echo "Items".$ticker ?>" method="post">

这会给每个表单元素和每个按钮元素一个唯一的 id。 --edit->- 您可以在 js 中使用该 id 而不是 #moreItems_add here'<br/>').insertBefore("#moreItems_add");（来自帖子的原始迭代）。也就是说，我没有意识到没有对象被发送到函数（即这里moreItems(this); 和这里的按钮function moreItems(button)。（最重要的是，jquery 是，嗯，不是我最好的东西）。底线是：如果您需要 javascript 中按钮的唯一 ID，您现在可以在 button.id 找到它。