How to dynamically add rows to a form in html when i click on add row button?

Question

<div class="row">
    <div class="col-md-4">
        <div class="form-group label-floating">
            <label class="control-label">Act</label>
            <input type="text" class="form-control" v-model="act" >
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group label-floating">
            <label class="control-label">Section </label>
            <input type="text" class="form-control" v-model="section">
        </div>
    </div>
    <button>Add row</button>
</div>

So, when I click on add button, i need to keep on adding the above row. How can I able to add this row when I click on add row button.

I need to pass values as BOOKED UNDER :

[{
    act :,
    section:,
}]

If I have more rows i need to pass values as comma seperated. I am weak in js and this is my first project having this kind of problem. How can I able to add values in this way.

My vue js code is

addForm = new Vue({
    el: "#addForm",
    data: {
        bookedUnder:[],
        act: '',
        section:'',
    },
    methods: {
        handleSubmit: function(e) {
            var vm = this;
            data['otherNatureofOffense'] = //in the abve way
            $.ajax({
                url: 'http://localhost:3000/record/add/f/',
                data: data,
                type: "POST",
                dataType: 'json',
                success: function(e) {
                    if (e.status) {
                        vm.response = e;
                        alert("success")
                    } else {
                        vm.response = e;
                        console.log(vm.response);
                        alert(" Failed") 
                    }
                }
            });
            return false;
        }, 
    },
});

Please help me to have a solution

You should read about vuejs components here(their official documentation): vuejs.org/v2/guide/components.html — Junaid Anwar
– Junaid Anwar, Commented Mar 27, 2018 at 8:29
this is what i needed when i click on add row button, i need to bring up with another row as the one given — Wanderer
– Wanderer, Commented Mar 27, 2018 at 8:55

Deepu Reghunath · Accepted Answer · 2022-04-05 13:23:12Z

If you use javascript or jquery this may helpful

var count=1;
$("#btn").click(function(){
  
  $("#container").append(addNewRow(count));
  count++;

});

function addNewRow(count){
  var newrow='<div class="row">'+
    '<div class="col-md-4">'+
        '<div class="form-group label-floating">'+
            '<label class="control-label">Act '+count+'</label>'+
            '<input type="text" class="form-control" v-model="act" >'+
        '</div>'+
    '</div>'+
    '<div class="col-md-4">'+
        '<div class="form-group label-floating">'+
            '<label class="control-label">Section '+count+'</label>'+
            '<input type="text" class="form-control" v-model="section">'+
        '</div>'+
    '</div>'+    
'</div>';
  return newrow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div id="container">
<div class="row">
    <div class="col-md-4">
        <div class="form-group label-floating">
            <label class="control-label">Act</label>
            <input type="text" class="form-control" v-model="act" >
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group label-floating">
            <label class="control-label">Section </label>
            <input type="text" class="form-control" v-model="section">
        </div>
    </div>
    
</div>
</div>
<button id="btn">Add row</button>

Deepu Reghunath · Accepted Answer · 2018-03-27 10:19:28Z

2

Try please,

document.getElementById("clickMe").onclick = function () { 
        //first div
        var newDivCol = document.createElement("div");
        newDivCol.setAttribute("class","col-md-4");
        //second div
        var newDivForm = document.createElement("div");
        newDivForm.setAttribute("class","form-group label-floating");
        newDivCol.appendChild(newDivForm);

        //label
        var newlabel = document.createElement("label");
        newlabel.setAttribute("class","control-label");
        newlabel.innerHTML = "Here goes the text";
        newDivForm.appendChild(newlabel);

        //input
        var newInput = document.createElement("input");
        newInput.setAttribute("type","text");
        newInput.setAttribute("class","form-control");
        newInput.setAttribute("v-model","act");
        newDivForm.appendChild(newInput);

        var element = document.getElementById("addRowsHere");
        element.appendChild(newDivCol);
};

<div class="row" id="addRowsHere">
    <div class="col-md-4">
        <div class="form-group label-floating">
            <label class="control-label">Act</label>
            <input type="text" class="form-control" v-model="act" >
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group label-floating">
            <label class="control-label">Section </label>
            <input type="text" class="form-control" v-model="section">
        </div>
    </div>
</div>
<button id="clickMe">Add row</button>

https://jsfiddle.net/kkyunLzg/2/#

edited Mar 27, 2018 at 10:19

Deepu Reghunath

10.1k2 gold badges42 silver badges48 bronze badges

answered Mar 27, 2018 at 9:36

Bakhtier Gaibulloev

1591 silver badge13 bronze badges

3 Comments

Wanderer Over a year ago

where to add the button in this case

Wanderer Over a year ago

sir i need to first display these rows and below this i need to mention add row if needed

Bakhtier Gaibulloev Over a year ago

Should do what do you want. At the bottom the link, where you can check it.

Georgi Antonov · Accepted Answer · 2018-03-27 13:44:20Z

You need to v-for the fields first then post the model like this:

<div class="row" v-for="(book, index) in bookedUnder" :key="index">
    <div class="col-md-4">
        <div class="form-group label-floating">
            <label class="control-label">Act {{index}}</label>
            <input type="text" class="form-control" v-model="book.act" >
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group label-floating">
            <label class="control-label">Section {{index}}</label>
            <input type="text" class="form-control" v-model="book.section">
        </div>
    </div>

</div>
<button @click="addNewRow">Add row</button>



addForm = new Vue({
    el: "#addForm",
    data: {
        bookedUnder:[
          {
             act: null,
             section: null,
          },
        ],
    },
    methods: {
        addNewRow: function() {
          this.bookedUnder.push({ act: null, section: null, });
        },
        handleSubmit: function(e) {
            var vm = this;
            $.ajax({
                url: 'http://localhost:3000/record/add/f/',
                data: vm.bookedUnder,
                type: "POST",
                dataType: 'json',
                success: function(e) {
                    if (e.status) {
                        vm.response = e;
                        alert("success")
                    } else {
                        vm.response = e;
                        console.log(vm.response);
                        alert(" Failed") 
                    }
                }
            });
            return false;
        }, 
    },
});

Indyz · Accepted Answer · 2018-03-27 10:23:10Z

0

Depending on the typ of row you want to add there are different solutions.

If you want to add 'Section'-rows only, you could use an v-for in Vue and push a object to the array connected to the v-for:

Template:

<div class="col-md-4" v-for="(row, index) in rows" :key="index">
  <div class="form-group label-floating">
    <label class="control-label">Section </label>
    <input type="text" class="form-control" v-model="row.section">
  </div>
</div>
<button @click="addRow">
  Add Row
</button>

JS:

 data: {
   rows: [],
   defaultRow: {
     section: 'new-row'
   }
 },
 methods: {
   addRow() {
     // Clone the default row object
     this.rows.push(Object.assign({}, this.defaultRow))
   }
 }

If you want to add different types of rows you'll either have to create vue-components and add those, or get creative with different defaultRows (like maybe adding different types for different input).

answered Mar 27, 2018 at 10:23

Indyz

3313 silver badges7 bronze badges

4 Comments

Wanderer Over a year ago

how to obtain the result as in the above question? Can you please help me

Wanderer Over a year ago

how to pass the values in this format [{ act :, section:, }]

Wanderer Over a year ago

Also i need to display the first row before i click the button

Indyz Over a year ago

To display the row before you could either insert the HTML above the v-for or automatically call addRow() on start (in this case after the HTML has been mounted alligator.io/vuejs/component-lifecycle) To still have the act and section values you could just extend your code with something similar to the example. This is only an example of a concept, you'll have to implement it on your own.

Octave Matamba · Accepted Answer · 2022-04-07 22:32:59Z

var count=1;
$("#btn").click(function(){
  
  $("#container").append(addNewRow(count));
  count++;

});

function addNewRow(count){
  var newrow='<div class="row">'+
    '<div class="col-md-4">'+
        '<div class="form-group label-floating">'+
            '<label class="control-label">Act '+count+'</label>'+
            '<input type="text" class="form-control" v-model="act" >'+
        '</div>'+
    '</div>'+
    '<div class="col-md-4">'+
        '<div class="form-group label-floating">'+
            '<label class="control-label">Section '+count+'</label>'+
            '<input type="text" class="form-control" v-model="section">'+
        '</div>'+
    '</div>'+    
'</div>';
  return newrow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div id="container">
<div class="row">
    <div class="col-md-4">
        <div class="form-group label-floating">
            <label class="control-label">Act</label>
            <input type="text" class="form-control" v-model="act" >
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group label-floating">
            <label class="control-label">Section </label>
            <input type="text" class="form-control" v-model="section">
        </div>
    </div>
    
</div>
</div>
<button id="btn">Add row</button>

Collectives™ on Stack Overflow

How to dynamically add rows to a form in html when i click on add row button?

5 Answers 5

Comments

3 Comments

1 Comment

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

3 Comments

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related