Home » Create Add/Remove Multiple Dynamically Input Fields in Javascript or Jquery

Create Add/Remove Multiple Dynamically Input Fields in Javascript or Jquery

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

Dynamically Add Input Fields And Submit To Database With jQuery and PHP
Dynamically Add Input Fields And Submit To Database With jQuery and PHP

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>

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.

Read Also:  laravel 6 Update Data in AJAX CRUD Operations

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  Upload Multiple Images Preview using PHP
  2. Read Also:  JQuery AJAX form Submit and serialize send Server Side
  3. Read Also:  Redirect page after delay using Jquery
  4. Read Also:  Append PHP HTML code using jQuery AJAX
  5. Read Also:  country state city drop down list in php mysql
  6. Read Also:  JavaScript isNaN Function Example with demo
  7. Read Also:  VUE js get current array index position
  8. Read Also:  Check Uncheck All Checkboxes using jQuery Selectors
  9. Read Also:  onclick show hide div jquery demo - jQuery Effects
  10. Read Also:  Redirect page after delay using Jquery

Leave a Comment

Your email address will not be published. Required fields are marked *