[英]How to dynamically add rows to a form in html when i click on add row button?
<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>
所以,当我点击添加按钮时,我需要继续添加上面的行。 单击添加行按钮时如何添加此行。
我需要将值作为 BOOKED UNDER 传递:
[{
act :,
section:,
}]
如果我有更多行,我需要以逗号分隔的形式传递值。 我在 js 方面很弱,这是我第一个遇到此类问题的项目。 我怎样才能以这种方式增加价值。
我的 vue.js 代码是
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;
},
},
});
请帮我解决
请尝试
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>
如果您使用纯JavaScript,这可能会有所帮助
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>
您需要先对字段进行v-处理,然后再发布如下模型:
<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;
},
},
});
根据要添加的行的类型,有不同的解决方案。
如果只想添加“ Section”行,则可以在Vue中使用v-for并将对象推到连接到v-for的数组上:
模板:
<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))
}
}
如果要添加不同类型的行,则要么必须创建并添加vue组件,要么要使用不同的defaultRows获得创意(例如可能为不同的输入添加不同的类型)。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.