add/remove multiple input fields

Question

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

doug65536 · Accepted Answer · 2015-10-20 08:28:22Z

There are several issues:

Avoid putting blobs of HTML in your javascript, put your HTML in the HTML file.
Avoid IDs, particularly when they will certainly be duplicated. Duplicate IDs are illegal. Only the first one can be found with a lookup.
Avoid concatenating together strings of text to generate your HTML. It is a too easy to make a mistake and put an XSS vulnerability in your code that way.

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

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.

Insane Skull · Accepted Answer · 2015-10-20 05:18:42Z

0

You can remove elements with a reference to the parent using similar syntax with the following:

var childElement = document.getElementById("myChildElement");
document.getElementById("myElement").removeChild(childElement);

Similar to what is described here: http://www.w3schools.com/js/js_htmldom_nodes.asp

Also, consider a toggle on the CSS style property: "display: none;"

edited Oct 20, 2015 at 5:18

Insane Skull

9,3619 gold badges49 silver badges66 bronze badges

answered Oct 20, 2015 at 4:41

kondrak

4364 silver badges10 bronze badges

1 Comment

Nabin Over a year ago

can you please share me a code relevant to above code that i have used... i have tried every possible method i could think of but couldnt make it to do as i have wanted

Collectives™ on Stack Overflow

add/remove multiple input fields

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related