最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - RepeatAdd div after clicking the button - Stack Overflow

programmeradmin0浏览0评论

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.

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.

Share Improve this question edited Nov 28, 2016 at 11:48 jenna_3108 asked Nov 28, 2016 at 10:29 jenna_3108jenna_3108 4351 gold badge7 silver badges20 bronze badges 5
  • 2 Yes it is very much possible. – Rishabh Commented Nov 28, 2016 at 10:31
  • 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 – user3559349 Commented Nov 28, 2016 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 Commented Nov 28, 2016 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 Commented Nov 28, 2016 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 – user3559349 Commented Nov 28, 2016 at 23:46
Add a ment  | 

2 Answers 2

Reset to default 4

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./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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>


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

Hope this helps!

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

发布评论

评论列表(0)

  1. 暂无评论