How to dynamically add rows to a form in html when i click on add row button?
10,605
Solution 1
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;
},
},
});
Solution 2
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>
Solution 3
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/#
Author by
Wanderer
Updated on June 05, 2022Comments
-
Wanderer almost 2 years
<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
-
Junaid Anwar about 6 yearsYou should read about vuejs components here(their official documentation): vuejs.org/v2/guide/components.html
-
Deepu Reghunath about 6 yearsdoes the ajax call give you a success alert?
-
Wanderer about 6 yearsyes sir,, it will give.. but why so, it is not our problem
-
Wanderer about 6 yearsthis is what i needed when i click on add row button, i need to bring up with another row as the one given
-
Deepu Reghunath about 6 yearswhat is the response value e on success?
-
Bakhtier Gaibulloev about 6 years@Wanderer if you want, I can write pure js solution.
-
Wanderer about 6 years@BakhtierGaibulloev please help me
-
Wanderer about 6 years@BakhtierGaibulloev it is enough
-
Bakhtier Gaibulloev about 6 years@Wanderer moment
-
-
Wanderer about 6 yearswhere to add the button in this case
-
Wanderer about 6 yearssir i need to first display these rows and below this i need to mention add row if needed
-
Bakhtier Gaibulloev about 6 yearsShould do what do you want. At the bottom the link, where you can check it.
-
Wanderer about 6 yearshow to obtain the result as in the above question? Can you please help me
-
Wanderer about 6 yearshow to pass the values in this format [{ act :, section:, }]
-
Wanderer about 6 yearsAlso i need to display the first row before i click the button
-
Indyz about 6 yearsTo 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.
-
Wanderer about 6 yearsThank you sir.. you saved me