Bootstrap Dynamic Form with Add & Delete

Bootstrap Forms: Bootstrap Dynamic Form with Add & Delete

Sometimes you need bootstrap forms to have dynamic inputs. It means the number of elements might vary during the user completes it. With aid of JQuery, you are able to add or delete inputs to the forms very easily, like the following code example.

#Bootstrap Dynamic Input #Bootstrap JQuery Add Delete Input #Bootstrap JQuery Dynamic Form

<!-- this script got from www.frontendfreecode.com -->
<div id="app" class="container-fluid">
	<div class="col-xs-12">
		<div class="row  form-row" v-for="row in rows">
			<div class="col-xs-12">
				<div class="row">
					<div class="col-xs-12">
						<div class="col-xs-3">
							<select name="" id="" class="form-control" v-model="row.select">
								<option :value="option.value" v-for="option in options">{{ option.label }}</option>
							</select>
						</div>
						<div class="col-xs-6">
							<input type="text" class="form-control" placeholder="Value" v-model="row.name">
						</div>
						<div class="col-xs-2">
							<input type="checkbox" id="chk" v-model="row.check"><label for="chk">Mandatory</label>
						</div>
						<div class="col-xs-1">
							<button class="btn btn-danger" @click="deleteRow(row)">X</button>
						</div>
					</div>
				</div>
				<div class="row" v-if="row.select==3 || row.select==4 ">
					<div class="row subrow" v-for="subrow in row.subrows">
						<div class="col-xs-12">
							<div class="col-xs-3"></div>
							<div class="col-xs-7">
								<input type="text" class="form-control" v-model="subrow.answer">
							</div>
							<div class="col-xs-2">
								<button class="btn btn-danger" @click="deleteSubrow(row,subrow)">X</button>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-xs-12">
							<button class="btn btn-success center-block" @click="addSubRow(row)">Add Answer</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-12">
				<button type="submit" class="btn btn-info">Submit</button>
				<button type="submit" class="btn btn-success" @click="addRow">Add Row</button>
			</div>
		</div>
	</div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Code</a>

.form-row {
	border:  1px solid #e2e2e2;
	margin:  10px;
	padding: 20px;
	background: #f2f2f2;
}
.subrow {
	margin: 5px;
	padding:  5px;
}

new Vue({
	el: '#app',
	data: {
		options: [
			{ 'label': 'Text', 'value': 1},
			{ 'label': 'Numeric', 'value': 2},
			{ 'label': 'Check box', 'value': 3},
			{ 'label': 'Radio button', 'value': 4},
			{ 'label': 'Drop down', 'value': 5},
			{ 'label': 'Image', 'value': 6},
			{ 'label': 'Date', 'value': 7},
		],
		rows: [
			{ 'select': 1, 'name': '', 'check': false, 'subrows': [{  answer: ''}]}
		]
	},
	methods: {
		addRow: function() {
			this.rows.push({'select': 1, 'name': '', 'check': false, subrows: [{ answer: ''} ]});
		},
		deleteRow: function(row) {
			this.rows.$remove(row);
		},
		addSubRow: function(row) {
			row.subrows.push({ answer: ''})
		},
		deleteSubrow: function(row, subrow) {
			row.subrows.$remove(subrow);
		}
	}
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- this script got from www.frontendfreecode.com -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
<style>
.form-row {
	border:  1px solid #e2e2e2;
	margin:  10px;
	padding: 20px;
	background: #f2f2f2;
}
.subrow {
	margin: 5px;
	padding:  5px;
}
</style>

</head>
<body>
<div id="app" class="container-fluid">
	<div class="col-xs-12">
		<div class="row  form-row" v-for="row in rows">
			<div class="col-xs-12">
				<div class="row">
					<div class="col-xs-12">
						<div class="col-xs-3">
							<select name="" id="" class="form-control" v-model="row.select">
								<option :value="option.value" v-for="option in options">{{ option.label }}</option>
							</select>
						</div>
						<div class="col-xs-6">
							<input type="text" class="form-control" placeholder="Value" v-model="row.name">
						</div>
						<div class="col-xs-2">
							<input type="checkbox" id="chk" v-model="row.check"><label for="chk">Mandatory</label>
						</div>
						<div class="col-xs-1">
							<button class="btn btn-danger" @click="deleteRow(row)">X</button>
						</div>
					</div>
				</div>
				<div class="row" v-if="row.select==3 || row.select==4 ">
					<div class="row subrow" v-for="subrow in row.subrows">
						<div class="col-xs-12">
							<div class="col-xs-3"></div>
							<div class="col-xs-7">
								<input type="text" class="form-control" v-model="subrow.answer">
							</div>
							<div class="col-xs-2">
								<button class="btn btn-danger" @click="deleteSubrow(row,subrow)">X</button>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-xs-12">
							<button class="btn btn-success center-block" @click="addSubRow(row)">Add Answer</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-12">
				<button type="submit" class="btn btn-info">Submit</button>
				<button type="submit" class="btn btn-success" @click="addRow">Add Row</button>
			</div>
		</div>
	</div>
</div>
<div id="bcl"><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Code</a></div>
<script>
new Vue({
	el: '#app',
	data: {
		options: [
			{ 'label': 'Text', 'value': 1},
			{ 'label': 'Numeric', 'value': 2},
			{ 'label': 'Check box', 'value': 3},
			{ 'label': 'Radio button', 'value': 4},
			{ 'label': 'Drop down', 'value': 5},
			{ 'label': 'Image', 'value': 6},
			{ 'label': 'Date', 'value': 7},
		],
		rows: [
			{ 'select': 1, 'name': '', 'check': false, 'subrows': [{  answer: ''}]}
		]
	},
	methods: {
		addRow: function() {
			this.rows.push({'select': 1, 'name': '', 'check': false, subrows: [{ answer: ''} ]});
		},
		deleteRow: function(row) {
			this.rows.$remove(row);
		},
		addSubRow: function(row) {
			row.subrows.push({ answer: ''})
		},
		deleteSubrow: function(row, subrow) {
			row.subrows.$remove(subrow);
		}
	}
})
</script>

</body>
</html>

Preview

RECENT CODES

Bootstrap Table with Sorting Animation

Bootstrap Table with Col and Row Effect on Hover

Bootstrap Table with Fixed Header

Bootstrap Collapsing / Expanding Table

Bootstrap Pricing Table with Fade Effect

Bootstrap Header with Hover Effect

Bootstrap Dynamic Header with Style Change

Bootstrap Header with Material Effect for Tabs

Animating Bootstrap 4 Navbar

Vertical Bootstrap Header with Animation

Feel The Power

Bootstrap Forms: Bootstrap Dynamic Form with Add & Delete

What are You Looking for?

Watch how to Create the Tool!

The Tool Demo