添加/删除多个输入字段 [英] add/remove multiple input fields

问题描述

<div class="form-inline">

  <div class="form-group col-lg-4">

    <label>Select Item:</label>

    <div id="field1">
      <select class="form-control" name="item_1">
        <?php if($item !=0){foreach ($item as $list_item){?>
        <option value="<?php echo $list_item['item'];?>">
          <?php echo $list_item[ 'item'];?>
        </option>

        <?php }}else {?>
        <option value="">No Items Available</option>
        <?php }?>
      </select>

    </div>
  </div>
  <div class="form-group col-lg-2">

    <label>Quantity:</label>
    <div id="field2">
      <input type="number" min="1" class="form-control input-md" name="quantity_1" />
    </div>
  </div>


  <div class="form-group col-lg-3">

    <label>Cost(per piece):</label>
    <div id="field3">
      <input type="number" min="1" class="form-control input-md" name="cost_1" />
    </div>
  </div>
  <div class="form-group col-lg-3" style="margin-top:25px">
    <div id="field4">
      <button id="addmore" onclick="add();" class="btn add-more" type="button">+</button>
    </div>
  </div>
</div>

我有这三个字段（'项目，数量和成本'），这三个字段是逐步添加的点击+按钮，但我正在删除这些按钮 - 单击。
我只需要在一次点击时添加这三个输入字段，并在一次点击中删除这些字段。这些字段名称也应该递增。

I have these three fields('item, quantity and cost') and these three fields are added incrementally on clicking + button but i am having removing these buttons on - click. I simply need these three input fields to be added at one click and remove these fields on one click as well. also these fields name should be incremented.

<script>
  function add() {
    i++;
    var div1 = document.createElement('div');
    div1.innerHTML = '<select class="form-control" name="item_' + i + '">  <option value=""></option></select>';
    document.getElementById('field1').appendChild(div1);

    var div2 = document.createElement('div');
    div2.innerHTML = '<input type="number" min="1" class="form-control input-md" name="quantity_' + i + '" />';
    document.getElementById('field2').appendChild(div2);

    var div3 = document.createElement('div');
    div3.innerHTML = '<input type="number" min="1" class="form-control input-md" name="cost_' + i + '" />';
    document.getElementById('field3').appendChild(div3);

    var div4 = document.createElement('div');
    div4.innerHTML = '<button id="remove" onclick="remove_btn(this)" class="btn remove" type="button">-</button>';
    document.getElementById('field4').appendChild(div4);
  }
</script>

推荐答案

有几个问题：

• 避免在你的javascript中添加HTML blob，将你的HTML放在HTML文件中。


• 避免ID，特别是当他们肯定会重复。重复的ID是非法的。只有第一个可以找到查找。


• 避免连接文本字符串以生成HTML。这样做很容易出错并在代码中放入XSS漏洞。

(function($) {
  "use strict";
  
  var itemTemplate = $('.example-template').detach(),
      editArea = $('.edit-area'),
      itemNumber = 1;
  
  $(document).on('click', '.edit-area .add', function(event) {
    var item = itemTemplate.clone();
    item.find('[name]').attr('name', function() {
      return $(this).attr('name') + '_' + itemNumber;
    });
    ++itemNumber;
    item.appendTo(editArea);
  });
  
  $(document).on('click', '.edit-area .rem', function(event) {
    editArea.children('.example-template').last().remove();
  });
  
  $(document).on('click', '.edit-area .del', function(event) {
    var target = $(event.target),
        row = target.closest('.example-template');
    row.remove();
  });
}(jQuery));

.hidden { display: none; }
.formfield { float: left; }
.example-template { clear: left; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hidden">
  <div class="example-template">
    <div class="formfield"><input placeholder="Name" name="name"></div>
    <div class="formfield"><input placeholder="Addr" name="addr"></div>
    <div class="formfield"><input placeholder="Post" name="post"></div>
    <div class="formfield"><button class="del">-</button></div>
  </div>
</div>

<div class="edit-area">
  <div class="controls">
    <button class="add">+</button>
    <button class="rem">-</button>
  </div>
</div>

这适用于首先从隐藏的 div 元素中抓取行模板，并将其存储在变量中。每次需要创建一个新行时，它都会克隆模板并对其进行更新。它通过根据需要调整name元素，附加_和数字来更新它。一旦定制了该模板的副本，它就会将其附加到编辑区域。

This works by first grabbing the row template out of the hidden div element, and storing it in a variable. Each time it needs to make a new row, it clones the template and updates it. It updates it by adjusting the name element as required, appending "_" and a number. Once it has customized this copy of the template, it appends it to the edit area.

这篇关于添加/删除多个输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！