How to Add/Remove Multiple input fields Dynamically using Jquery?

In this quick tutorial I am going to create Dynamic Form Fields using Jquery. Here i write a script to add multiple input fields with remove button.

First you can add latest jquery library File.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Add Following JS Function for your required page.

<script>

//  Insert content with the append() method.

var rowCount = 1;
function addMoreRows(frm) {
rowCount ++;
var recRow = '<div class="row" id="registration'+rowCount+'"><div class="col-md-4"><div class="form-group"><input type="text" name="name[]" id="name'+rowCount+'" class="form-control"></div></div><div class="col-md-4"><div class="form-group"><input type="text" class="form-control" name="mobile[]" id="mobile'+rowCount+'"></div></div><div class="col-md-3"><div class="form-group"><input type="text" class="form-control" name="email[]" id="email'+rowCount+'"></div></div><div class="col-md-1"><a href="javascript:void(0);" onclick="removeRow('+rowCount+');" style="float:left;"> <i  class="fa fa-trash btn btn-danger"></i></a></div></div>';
jQuery('#addedRows').append(recRow);
}
   
// Remove Content

function removeRow(removeNum) {
    
if(removeNum == 1){
    alert("Cannot Delete this Row");
    return false;
} else {    
jQuery('#registration'+removeNum).remove();
}

}   
</script>

The append() method inserts specified content at the end of the selected elements.

Example Code

<html>
   <head>
      <!-- Latest compiled and minified CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <!-- jQuery library -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <!-- Latest compiled JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <script src="https://use.fontawesome.com/e2d16502eb.js"></script>
   </head>
   <body>
      <h2 style="text-align:center;">Dynamic Fields</h2>
      <br>
      <div class="container">
         <div class="row" id="registration1">
            <div class="col-md-4">
               <div class="form-group">
                  <label>Name</label>
                  <input type="text" class="form-control" name="name[]" id="name1">
               </div>
            </div>
            <div class="col-md-4">
               <div class="form-group">
                  <label>Mobile Number</label>
                  <input type="text" class="form-control" name="mobile[]" id="mobile1">
               </div>
            </div>
            <div class="col-md-3">
               <div class="form-group">
                  <label>Email</label>
                  <input type="text" class="form-control" name="email[]" id="email1">
               </div>
            </div>
            <div class="col-md-1"> <br>
               <a href="javascript:void(0);" onclick="removeRow(1);" style="float:left;"> <i  class="fa fa-trash btn btn-danger"></i></a>    
            </div>
         </div>
         <div id="addedRows"></div>
         <div class="row">
            <button class="btn btn-warning pull-right" onclick="addMoreRows(this.form);" type="button">Add New</button>    
         </div>
      </div>
      <script>
         var rowCount = 1;
         function addMoreRows(frm) {
         rowCount ++;
         var recRow = '<div class="row" id="registration'+rowCount+'"><div class="col-md-4"><div class="form-group"><input type="text" name="name[]" id="name'+rowCount+'" class="form-control"></div></div><div class="col-md-4"><div class="form-group"><input type="text" class="form-control" name="mobile[]" id="mobile'+rowCount+'"></div></div><div class="col-md-3"><div class="form-group"><input type="text" class="form-control" name="email[]" id="email'+rowCount+'"></div></div><div class="col-md-1"><a href="javascript:void(0);" onclick="removeRow('+rowCount+');" style="float:left;"> <i  class="fa fa-trash btn btn-danger"></i></a></div></div>';
         jQuery('#addedRows').append(recRow);
         }
            
         function removeRow(removeNum) {
             
         if(removeNum == 1){
             alert("Cannot Delete this Row");
             return false;
         } else {    
         jQuery('#registration'+removeNum).remove();
         }
         
         }   
      </script>
   </body>
</html>

 

You May Also Like

Leave a Reply

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