Question

我不确定如何做到这一点的最佳方法，但我已经奠定了框架。

基本上，我想添加功能，以便在单击我的#moreItems_add按钮并调用moreItems函数时，我只想在其下方添加一个新的Input字段，依此类推。我想将其限制为10个字段，所以我在函数中进行了显示。

唯一的技巧是，我将通过ajax提交所有字段以保存到数据库，因此我需要尝试跟踪每个ID。

在此处继续javascript的最佳方法是什么，这样我就可以在按钮按下时附加一个输入字段并跟踪每个ID了？

<div class="modal-body">
    <form id="Items">
        <label id="ItemLabel">Item 1:</label>
        <input type="text" name="Items[]">
        <button id="moreItems_add" onclick="moreItems()" id="moreItems">More Items</button>
    </form>
</div>
<div class="modal-footer">
    <input type="submit" name="saveItems" value="Save  Items">
</div>


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

    function moreItems(){
        var MaxItems = 10;

        //If less than 10, add another input field
    }

</script>

Answer 1

您可以使用jQuery .insertBefore（）方法在“更多项目”按钮之前插入元素。下面是表示此代码的代码：

var maxItems = 1;
function moreItems() {
  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;
    
    $('<br/>').insertBefore("#moreItems_add");
    $(label).insertBefore("#moreItems_add");
    $(input).insertBefore("#moreItems_add");
    maxItems++;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal-body">
    <form id="Items">
        <label id="ItemLabel">Item 1:</label>
        <input type="text" name="Items[]">
        <button type="button" id="moreItems_add" onclick="moreItems()" id="moreItems">More Items</button>
    </form>
</div>
<div class="modal-footer">
    <input type="submit" name="saveItems" value="Save  Items">
</div>

Answer 2

类似这样的事情应该可以解决：

<!--  modal JS -->
<script type="text/javascript">
    var MAX_ITEMS = 10,
        added = 0;

    function moreItems(){
        if (added >= MAX_ITEMS) return;

        var newField = document.createElement('input');
        newField.type = 'text';
        //  TODO: Any field setup.

        document.getElementById('items').appendChild(newField);
        added++;
    }
</script>

就跟踪具有ID的每个字段而言，出于数据完整性和安全原因，应始终由后端完成。

Answer 3

尝试一下：

const maxItens = 10,
let itensCount = 0;

function moreItems() {
   if (itensCount++ >= maxItens) {
      return false;
   } 

   let newInput = document.createElement('input');

   // use the iterator to make an unique id and name (to submit multiples)
   newInput.id = `Items[${itensCount}]`;
   newInput.name = `Items[${itensCount}]`;

   document.getElementById('items').appendChild(newInput);

   return false;
}

添加类型“按钮”以停止提交页面（此外，您的按钮有两个ID）：

<button id="moreItems_add" onclick="moreItems();" type="button">More Items</button>

提交按钮必须在表单内部才能工作：

    <form>
        <div class="modal-body">
            <div id="Items">
                <label id="ItemLabel">Item 1:</label>
                <input type="text" name="Items[]">
            </div>
            <button id="moreItems_add" onclick="moreItems()" id="moreItems">More Items</button>
        </div>
        <div class="modal-footer">
            <button type="submit">Save  Items</button>
        </div>
    </form>

要依次添加itens，按钮必须位于div“ itens”之外。

如果按钮被单击，则将输入添加到表单

3 个答案: