Repeat / Add div after clicking the button

Question

I have 3 fields in a row, I'm not using table. So I would like to know is it possible to add new 'row' which is using div tag when click on the + button?

The code is as follow.

<div id="order-details-booking">
        <blockquote>Self-order Menu</blockquote>
        <div class="row">
            <div class="input-field col s4">
                <input type="text" class="item-code" placeholder="Item Code"/>
            </div>
            <div class="input-field col s2">
                <input type="text" class="qty" placeholder="Qty" />
            </div>
            <div class="input-field col s5">
                <input type="text" class="order-remarks" placeholder="Remarks" />
            </div>
            <div class="col s1">
                <i class="material-icons">add</i>
            </div>
        </div>
    </div>

Initially, it only has 1 row.

What I want is, after clicking the + button, it will add a new row like this.

Yes, but a bit pointless using the html you have shown - it would be creating duplicate `id` attributes (invalid html) and you would not be able to bind to a model when you submit — , Nov 28 '16 at 10:32
adding a new row is possible but the main question is how are you planning to post it to the server? are you depending on MVC default model binder or use jquery and fomat your data before sending to server.. — Rajshekar Reddy, Nov 28 '16 at 10:56
@Reddy, I wanted to use MVC binding to array. I'm using RavenDB, and I intended to pass the data like in one booking has an array model FoodOrder[]. But I find it hard for me to bind to array. Or do u have any other better idea than this? — jenna_3108, Nov 28 '16 at 13:17
@jenna_3108, RavenDB has got nothing to do with your issue. If you want to dynamically add collection items in a view, refer [this answer](http://stackoverflow.com/questions/28019793/submit-same-partial-view-called-multiple-times-data-to-controller/28081308#28081308) — , Nov 28 '16 at 23:46

score 4 · Answer 1 · answered Nov 28 '16 at 10:50

You can use jQuery to add as well as remove form fields with id increment. Please have a look at the snippet below:

// Cloning Form
  var id_count = 1;
  $('.add').on('click', function() {
    var source = $('.form-holder:first'), clone = source.clone();
    clone.find(':input').attr('id', function(i, val) {
      return val + id_count;
    });
    clone.appendTo('.form-holder-append');
    id_count++;
  });

// Removing Form Field
$('body').on('click', '.remove', function() {
    var closest = $(this).closest('.form-holder').remove();
  });

.form-holder {
  display: flex;
  margin-bottom: 10px;
}

.input-field input {
  width: 100px;
}

.add, .remove {
  display: block;
  border: 1px solid #ccc;
  padding: 2px 10px;
  margin-left: 10px;
  cursor: pointer;
}

.add:hover {
  background: #eee;
}

.remove {
  display: none;
}

.form-holder-append .remove {
  display: block;
}

body {
  margin: 20px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div id="order-details-booking">
        <blockquote>Self-order Menu</blockquote>
        <div class="row">
          <div class="form-holder col-xs-12">
            <div class="input-field col s4">
                <input type="text" id="item-code" placeholder="Item Code"/>
            </div>
            <div class="input-field col s2">
                <input type="text" id="item-code" placeholder="Qty" />
            </div>
            <div class="input-field col s5">
                <input type="text" id="item-code" placeholder="Remarks" />
            </div>
            <div class="col s1">
                <i class="material-icons remove">- remove</i>
            </div>
        </div>

          <div class="form-holder-append"></div>
          <div class="row">
                    <div class="col-xs-4">
                          <i class="material-icons add">+ add</i>
            </div></div>
    </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

Hope this helps!

How to achieve this using angular 4 – Nancy Nov 09 '18 at 08:27 — Nancy, Nov 09 '18 at 08:27

Anupam · Answer 2 · 2016-11-28T11:27:53.210

3

Use clone() method. It will create a duplicate object of the row you want to append. Use this object to add new rows to your parent div.

find("input[type='text']").val("") will clear any value entered in the original elements.

Also, as pointed out by others, your HTML has ids attached to elements which when duplicated creates multiple elements with same id. You should avoid using ids in such scenarios and use classes as selectors.

$('#order-details-booking').on('click','.material-icons',function(){
   $(this).closest('.row').clone().appendTo('#order-details-booking').find("input[type='text']").val("");//use closest to avoid multiple selection and clear input text elements
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="order-details-booking">
        <blockquote>Self-order Menu</blockquote>
        <div class="row">
            <div class="input-field col s4">
                <input type="text" id="item-code" placeholder="Item Code"/>
            </div>
            <div class="input-field col s2">
                <input type="text" id="item-code" placeholder="Qty" />
            </div>
            <div class="input-field col s5">
                <input type="text" id="item-code" placeholder="Remarks" />
            </div>
            <div class="col s1">
                <i class="material-icons">add</i>
            </div>
        </div>
    </div>

edited Nov 28 '16 at 11:27

answered Nov 28 '16 at 10:32

Anupam

7,966
3
41
63

[`parents()`](http://api.jquery.com/parents/) will select all ancestors matching the selector (which may cause problems later, following any redesign of the page); and this approach actively creates elements with duplicate `id` properties, rendering invalid HTML. Incidentally you've completely failed to explain what the code does and how it works in your answer (in order for the OP to usefully understand it). – David Thomas Nov 28 '16 at 10:34
@DavidThomas tnx for pointing it out. I havce edited the code to use `closest()` instead of `parents()`. I am also adding comments and reference in next edit for more clarity – Anupam Nov 28 '16 at 10:42
this will end up multiple click events to be triggered – ScanQR Nov 28 '16 at 10:42
@TechBreak Sorry I did not get you mate. Please help me understand how will that happen? – Anupam Nov 28 '16 at 10:55
For all those "+" having class .material-icons will be triggered on click on each click? also your clone approach will clone values too. OP wants clean row i suppose. – ScanQR Nov 28 '16 at 10:59
@TechBreak the thing about `clone(true)` is correct, it will copy the values too which it should not. But I am not so sure about multiple events being fired. Are you sure about that, because I have checked in debugger it seems to be triggered only once. Please let me know if that is not the case – Anupam Nov 28 '16 at 11:04

Repeat / Add div after clicking the button

2 Answers2