What is Javascript Dynamic fields?
When the input field will not be static and we can change the number of input field by clicking the button then it is called the dynamic fields.
Why use Javascript Dynamic fields?
In our application, sometimes we need to add more details of the products. In that case, we use add more button so that we can easily add the more details about the product.
For example, when we going to add a medicine name "PARACETAMOL" in the system. we have to think about the variation of this product. Because PARACETAMOL has different variation. In that case we need to use dynamic input field option. So that, we can easily add this multiple variation product in the system.
That's the main motive to use javascript dynamic fields in the application.
How looks Javascript Dynamic fields?
In the below, there is a demo of Javascript dynamic fields. It looks exactly like the following.
In this demo, i have used two button.
- Minus Mark Button
- Plus Mark Button
Once you click on "Plus Mark Button" then one input field row will be automatically added in the system.
But if you click on "Minus Mark Button" then one input field row will be automatically Removed from the system.
Preview Example:
Way to create dynamic Add/Remove input field?
Today, I'm going to show How to create add/remove input fields dynamically with JavaScript in laravel 5.8 project.
We can easily create Add more fields and Remove group of input fields using JavaScript in laravel. We will create javascript dynamic fields with bootstrap 4 and JavaScript in laravel project.
Use laravel validation for add more input fields. You can add more multiple input fields like sometimes we need to add same information add multiple time with same form input. That's why we will create table row with input fields and add add more button so when you click on that button then it will append new row with input fields.
There is the Code Source. By using this code you can easily create Dynamic Add/Remove Input Fields. You can also watch the following video. In this video i have shown how to use this code properly.
Source Code:
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
<?php $row_num=1;?>
<table class="table table-responsive">
<thead>
<tr>
<th>Info.</th>
<th>Medicine Name</th>
<th>Quantity</th>
<th>Unit/Price</th>
<th>Total</th>
<th>Action</th>
</tr>
</thead>
<tbody class="row_container">
<tr id="div_{{$row_num}}">
<td>
<a href="javascript:0" class="btn btn-warning"><i class="fa fa-info-circle"></i></a>
</td>
<td>
<input type="text" name="medicine_name" class="form-control" placeholder="Medicine Name">
</td>
<td>
<input type="text" name="quantity" class="form-control" placeholder="Quantity">
</td>
<td>
<input type="text" name="unit_price" class="form-control" placeholder="Unit Price">
</td>
<td>
<input type="text" name="total" class="form-control" placeholder="Total">
</td>
<td>
<a href="javascript:0" class="btn btn-danger"><i class="fa fa-minus" onclick="$('#div_{{$row_num}}').remove();"></i></a>
</td>
</tr>
</tbody>
</table>
</body>
</html>
<script type="text/javascript">
var RowNum = '{{$row_num}}';
function addrow(){
RowNum++;
var html = "";
html += '<tr id="div_'+RowNum+'">';
html +='<td>';
html +='<a href="javascript:0" class="btn btn-warning"><i class="fa fa-info-circle"></i></a>';
html +='</td>';
html +='<td>';
html +='<input type="text" name="medicine_name" class="form-control" placeholder="Medicine Name">';
html +='</td>';
html +='<td>';
html +='<input type="text" name="quantity" class="form-control" placeholder="Quantity">';
html +='</td>';
html +='<td>';
html +='<input type="text" name="unit_price" class="form-control" placeholder="Unit Price">';
html +='</td>';
html +='<td>';
html +='<input type="text" name="total" class="form-control" placeholder="Total">';
html +='</td>';
html +='<td>';
html +='<a href="javascript:0" class="btn btn-danger"><i class="fa fa-minus" onclick="$(\'#div_'+RowNum+'\').remove();"></i></a>';
html +='</td>';
html +='</tr>';
$('.row_container').append(html);}
</script>
EmoticonEmoticon