“Add Remove Multiple Input Fields Dynamically Using Javascript,Dynamically Add Remove Multiple Input Fields with Jquery,Create Add/Remove Multiple Dynamically Input Fields in Javascript or Jquery”
Hello friends, today I will tell you through experts php tutorial that how to use dynamic multiple input fields in jquery. Step by step You will be explained through this tutorial. So come let’s go.
1.First, you create a form in html and add multiple input fields to it. Then save this page in the name of multiple-input-fields.html in your folder. Just as you can see below.
multiple-input-fields.html
<!DOCTYPE html> <html> <head> <title>Add Remove Multiple Input Fields Dynamically Using Jquery</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> </head> <body><div class="col-md-12"> <form> <div class="input_fields_wrap"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="">City</label> <select name="city[]" class="form-control" required=""> <option value="">--Select City--</option> <option value="noida">Noida</option> <option value="gurgaon">Gurgaon</option> <option value="delhi">Delhi</option> <option value="indor">Indore </option> <option value="jaipur">Jaipur</option> </select> </div> <div class="form-group" > <label for="">Email</label> <input name="email[]" type="text" value="" class="form-control" required=""> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="">Numbers</label> <input name="number[]" type="text" value="" class="form-control"> </div> <div class="form-group"> <label for="">Address</label> <textarea class="form-control" name="address[]" required=""></textarea> </div> </div> <button style="background-color:green;" class="add_field_button btn btn-info active">Add More Address</button> </div> </div> </form> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script><script src="js/fields.js"></script> </body> </html>
2.Then after you create a file of js, add the script code below. You can place name fields.js of this script file.
fields.js
$(document).ready(function() {
var max_fields = 15; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div class="row"><div class="col-md-6"><div class="form-group"><label for="">City</label><select name="city[]" class="form-control"><option value="">--Select City--</option><option value="noida">Noida</option><option value="gurgaon">Gurgaon</option><option value="delhi">Delhi</option><option value="indor">Indore </option><option value="jaipur">Jaipur</option></select></div><div class="form-group"><label for="">Email</label><input name="email[]" type="text" class="form-control"></div></div><div class="col-md-6"><div class="form-group"><label for="">Numbers</label><input name="number[]" type="text" class="form-control"></div><div class="form-group"><label for="">Address</label><textarea class="form-control" name="address[]"></textarea></div></div><div style="cursor:pointer;background-color:red;" class="remove_field btn btn-info">Remove</div></div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
You can write this code in the same file by not writing this script code in js file. You can see as described below.
multiple-input-fields.html
<!DOCTYPE html>
<html>
<head>
<title>Add Remove Multiple Input Fields Dynamically Using Jquery</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
</head>
<body>
<div class="col-md-12">
<form>
<div class="input_fields_wrap">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="">City</label>
<select name="city[]" class="form-control" required="">
<option value="">--Select City--</option>
<option value="noida">Noida</option>
<option value="gurgaon">Gurgaon</option>
<option value="delhi">Delhi</option>
<option value="indor">Indore </option>
<option value="jaipur">Jaipur</option>
</select>
</div>
<div class="form-group" >
<label for="">Email</label>
<input name="email[]" type="text" value="" class="form-control" required="">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="">Numbers</label>
<input name="number[]" type="text" value="" class="form-control">
</div>
<div class="form-group">
<label for="">Address</label>
<textarea class="form-control" name="address[]" required=""></textarea>
</div>
</div>
<button style="background-color:green;" class="add_field_button btn btn-info active">Add More Address</button>
</div>
</div>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var max_fields = 15; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div class="row"><div class="col-md-6"><div class="form-group"><label for="">City</label><select name="city[]" class="form-control"><option value="">--Select City--</option><option value="noida">Noida</option><option value="gurgaon">Gurgaon</option><option value="delhi">Delhi</option><option value="indor">Indore </option><option value="jaipur">Jaipur</option></select></div><div class="form-group"><label for="">Email</label><input name="email[]" type="text" class="form-control"></div></div><div class="col-md-6"><div class="form-group"><label for="">Numbers</label><input name="number[]" type="text" class="form-control"></div><div class="form-group"><label for="">Address</label><textarea class="form-control" name="address[]"></textarea></div></div><div style="cursor:pointer;background-color:red;" class="remove_field btn btn-info">Remove</div></div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
</script>
</body>
</html>