Today, We want to share with you add/remove multiple input fields dynamically with jquery .In this post we will show you Add Remove Multiple Input Fields Dynamically Using Javascript, hear for Dynamically Add Remove Multiple Input Fields with Jquery we will give you demo and example for implement.In this post, we will learn about Dynamically Add Remove multiple input fields in PHP MYSQL with Jquery Ajax with an example.
Create Add/Remove Multiple Dynamically Input Fields in Javascript or Jquery
HTML Code
multiple-input-fields.html
<!DOCTYPE html> <html> <head> <title>Add Remove Multiple Input Fields Dynamically Using Jquery - www.pakainfo.com</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="">Websites</label> <select name="websites[]" class="form-control" required=""> <option value="">--Select Websites--</option> <option value="pakainfo">Pakainfo</option> <option value="4cgandhi">4cgandhi</option> <option value="infinityknow">infinityknow</option> <option value="w3school">w3school </option> <option value="tutorialspoint">tutorialspoint</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="">Location</label> <textarea class="form-control" name="locations[]" required=""></textarea> </div> </div> <button style="background-color:green;" class="add_field_button btn btn-info active">Add More Location</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>
JavaScript Code
fields.js
$(document).ready(function() {
var max_fields = 15;
var wrapper = $(".input_fields_wrap");
var add_button = $(".add_field_button");
var x = 1; //initlal text box count
$(add_button).click(function(e){
e.preventDefault();
if(x < max_fields){
x++;
$(wrapper).append('<div class="row"><div class="col-md-6"><div class="form-group"><label for="">Websites</label><select name="websites[]" class="form-control"><option value="">--Select Websites--</option><option value="pakainfo">Pakainfo</option><option value="4cgandhi">4cgandhi</option><option value="infinityknow">infinityknow</option><option value="w3school">w3school </option><option value="tutorialspoint">tutorialspoint</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="">Location</label><textarea class="form-control" name="locations[]"></textarea></div></div><div style="cursor:pointer;background-color:red;" class="remove_field btn btn-info">Remove</div></div>');
}
});
$(wrapper).on("click",".remove_field", function(e){
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
Full Source code
index.html
<html>
<head>
<title>Add Remove Multiple Input Fields Dynamically Using Jquery - www.pakainfo.com</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
</head>
<body>
<div class="col-md-12">
<div class="input_fields_wrap">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="">Websites</label>
<select name="websites[]" class="form-control" required="">
<option value="">--Select Websites--</option>
<option value="pakainfo">Pakainfo</option>
<option value="4cgandhi">4cgandhi</option>
<option value="infinityknow">infinityknow</option>
<option value="w3school">w3school </option>
<option value="tutorialspoint">tutorialspoint</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>
<button style="background-color:green;" class="add_field_button btn btn-info active">Add More Location</button>
</div>
</div>
</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;
var wrapper = $(".input_fields_wrap");
var add_button = $(".add_field_button");
var x = 1;
$(add_button).click(function(e){
e.preventDefault();
if(x < max_fields){
x++;
$(wrapper).append('<div class="row"><div class="col-md-6"><div class="form-group"><label for="">Websites</label><select name="websites[]" class="form-control"><option value="">--Select Websites--</option><option value="pakainfo">Pakainfo</option><option value="4cgandhi">4cgandhi</option><option value="infinityknow">infinityknow</option><option value="w3school">w3school </option><option value="tutorialspoint">tutorialspoint</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><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){
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
</script>
</body>
</html>
How to add and remove input fields dynamically using jQuery with Bootstrap ?
You can add and remove input fields dynamically using jQuery with Bootstrap by cloning the existing input fields and appending them to the form. Here’s an example:
HTML code:
<div class="form-group" id="inputFields">
<label for="name">Name</label>
<input type="text" class="form-control" name="name[]">
</div>
<button id="addInput" class="btn btn-primary">Add Input Field</button>
jQuery code:
$(document).ready(function(){
// Add input field on button click
$('#addInput').click(function(){
var $inputFields = $('#inputFields');
var $newInputField = $inputFields.clone();
// Clear the value of the new input field
$newInputField.find('input').val('');
// Append the new input field to the form
$inputFields.after($newInputField);
});
// Remove input field on button click
$(document).on('click', '.removeInput', function(){
$(this).closest('.form-group').remove();
});
});
In the above code, the #inputFields div contains the input field that will be cloned and appended to the form. The Add Input Field button has an ID of #addInput. When this button is clicked, the #inputFields div is cloned and a new input field is appended to the form.
To remove an input field, we use the $(document).on(‘click’, ‘.removeInput’, function(){…} event listener. This event listener is attached to the document and listens for clicks on any element with a class of .removeInput. When an element with this class is clicked, its parent .form-group div is removed.
To add the remove button to each input field, you can add the following code inside the #inputFields div:
<div class="form-group" id="inputFields">
<label for="name">Name</label>
<input type="text" class="form-control" name="name[]">
<button class="btn btn-danger removeInput">Remove</button>
</div>
This will add a Remove button next to each input field. When this button is clicked, its parent .form-group div will be removed.
I hope you get an idea about add/remove multiple input fields dynamically with jquery.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.