Question

我被困在这里。

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

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

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

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

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

如何解决此功能，使其可以在任何给定的时间适用于尽可能多的div / forms？

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

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。 -编辑->-想法是，您可以在js中使用该ID，而不是#moreItems_add在此'<br/>').insertBefore("#moreItems_add");（来自帖子的原始版本）。就是说，我没有抱怨没有对象被发送到函数（例如，这里moreItems(this);和这里function moreItems(button)的按钮。（最重要的是，jQuery是，不是我的最好的事情是：如果您需要JavaScript中按钮的唯一ID，则现在可以在button.id上找到它。

Button将输入添加到表单，但仅添加第一个。不在多个表格/格上

4 个答案: