In this post we will learn how to create a custom repeater or duplicator using jquery, We will build a basic form builder, So lets get started.
Preview :
// JQUERY
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>$(document).ready(function()
{
var count = 1;
function dynamic_field()
{
html = '';
html += '<tr>';
html += '<td><input type="text" name="label[]" class="form-control required" /></td>';
html += '<td><input type="text" name="placeholder[]" class="form-control" /></td>';
html += '<td><select name="type[]" class="form-control required">'+
'<option value="text">Text</option>'+
'<option value="email">Email</option>'+
'<option value="file">File</option>'+
'<option value="number">Number</option>'+
'<option value="date">Date</option>'+
'<option value="textarea">Textarea</option>'+
'</select></td>';
html += '<td><select name="require[]" class="form-control required"><option value="true">True</option><option value="false">False</option></select></td>';
html += '<td><select name="width[]" class="form-control required">'+
'<option value="25">25%</option>'+
'<option value="50">50%</option>'+
'<option value="75">75%</option>'+
'<option value="100">100%</option>'+
'</select></td>';
html += '<td><button type="button" name="remove" class="btn btn-danger remove">-</button></td></tr>';
$('tbody').append(html);
}
$(document).on('click', '#add', function(){
count++;
dynamic_field();
});
$(document).on('click', '.remove', function(){
count--;
$(this).closest("tr").remove();
});
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Custom Repeater</title>
<!-- BOOTSTRAP -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<!-- Styles -->
<style>
body {
background: #f7f7f7;
}
.form-box {
max-width: 80%;
margin: auto;
padding: 50px;
background: #ffffff;
border: 10px solid #f2f2f2;
margin-top: 100px;
}
h1, p {
text-align: center;
}
input, textarea {
width: 100%;
}
form{
padding-top: 40px;
}
.form-group{
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="form-box">
<h1>Custom Repeater</h1>
<p>Form Builder</p>
<form action="#" method="post" enctype="multipart/form-data">
<div class="row">
<div class="col-12 text-right" style="padding-bottom: 14px;">
<button type="button" name="add" id="add" class="btn btn-success border-radius-sm">
+
</button>
</div>
<div class="col-12">
<div class="table-responsive">
<table class="table table-bordered table-md">
<thead>
<tr>
<th>Label</th>
<th>Placeholder</th>
<th>Type</th>
<th>Required</th>
<th>Width</th>
<th>Action</th>
</tr>
</thead>
<tbody id="commission-tbody">
<tr>
<td><input name="label[]" type="text" class="form-control"></td>
<td><input name="placeholder[]" type="text" class="form-control"></td>
<td>
<select class="form-control" name="type[]">
<option value="text">{{__('Text')}}</option>
<option value="email">{{__('Email')}}</option>
<option value="file">{{__('File')}}</option>
<option value="number">{{__('Number')}}</option>
<option value="date">{{__('Date')}}</option>
<option value="textarea">{{__('Textarea')}}</option>
</select>
</td>
<td>
<select class="form-control" name="require[]">
<option value="true">{{__('True')}}</option>
<option value="false">{{__('False')}}</option>
</select>
</td>
<td>
<select class="form-control" name="width[]">
<option value="25">{{__('25')}}%</option>
<option value="50">{{__('50')}}%</option>
<option value="75">{{__('75')}}%</option>
<option value="100">{{__('100')}}%</option>
</select>
</td>
<td>
<button type="button" name="remove" class="btn btn-danger remove">-</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</form>
</div>
<!-- JQUERY -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function()
{
var count = 1;
function dynamic_field()
{
html = '';
html += '<tr>';
html += '<td><input type="text" name="label[]" class="form-control required" /></td>';
html += '<td><input type="text" name="placeholder[]" class="form-control" /></td>';
html += '<td><select name="type[]" class="form-control required">'+
'<option value="text">Text</option>'+
'<option value="email">Email</option>'+
'<option value="file">File</option>'+
'<option value="number">Number</option>'+
'<option value="date">Date</option>'+
'<option value="textarea">Textarea</option>'+
'</select></td>';
html += '<td><select name="require[]" class="form-control required"><option value="true">True</option><option value="false">False</option></select></td>';
html += '<td><select name="width[]" class="form-control required">'+
'<option value="25">25%</option>'+
'<option value="50">50%</option>'+
'<option value="75">75%</option>'+
'<option value="100">100%</option>'+
'</select></td>';
html += '<td><button type="button" name="remove" class="btn btn-danger remove">-</button></td></tr>';
$('tbody').append(html);
}
$(document).on('click', '#add', function(){
count++;
dynamic_field();
});
$(document).on('click', '.remove', function(){
count--;
$(this).closest("tr").remove();
});
});
</script>
</body>
</html>