jQuery form Add/Remove Fields Bootstrap 4 Edition

admin admin Aug 26, 2020 1861 2

jQuery form Add/Remove Fields Bootstrap 4 Edition

jQuery form Add/Remove Fields Bootstrap 4 Edition

Easily use Dynamic jQuery form Add/Remove Fields for your website.

Today I'm going to share how to make dynamic input fields using jQuery with add, remove option. multi-input is a jQuery form builder/manipulation plugin which makes it possible to dynamically add and/remove form fields by clicking on Plus and Minus buttons. This tutorial will show you how to dynamically add form elements to a form using jQuery.

HTML Code:

==========================

  1. <html>
  2.     <head>
  3.           <title>jQuery form Add/Remove Fields Bootstrap 4 Edition</title>
  4.           <!-- bootstrap 4 CDN Link -->
  5.           <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
  6.           <!-- fontawesome -->
  7.           <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous" />
  8.     </head>
  9.     <body>
  10.           <div class="container my-4">
  11.             <p class="h1">jQuery form Add/Remove Fields – Bootstrap 4 Edition</p>
  12.             <div class="card my-4 shadow">
  13.                <form method="" action=""> 
  14.                     <div class="card col-sm mb-3">
  15.                         <div class="card-body">
  16.                           <div class="form-group row ">
  17.                            <label for="field" class="font-weight-bold ">model test name</label>
  18.                               <select  class="form-control form-control-sm col-sm-4 ml-3" name="model_test_name_id"  >
  19.                                    <option value="">--select model test name--</option>
  20.                                         <option value="">model test A</option>
  21.                                         <option value="">model test B</option>
  22.                                         <option value="">model test C</option>
  23.                                     </select>
  24.                               </div>
  25.                     <div id="dynamic-field-1" class="form-group row dynamic-field">
  26.                      <label for="field" class="font-weight-bold mr-1 ">Field 1</label>
  27.                         <input type="text" id="field"  class="form-control form-control-sm  mr-1 col-sm-2"  name="model_question[]"value="" placeholder="Input Question Name"> 
  28.                         <input type="text" id="field"  class="form-control form-control-sm  mr-1 col-sm-2"  name="question_choice_a[]" value="" placeholder="Input 1st choice ">
  29.                         
  30.                         <input type="text" id="field"  class="form-control form-control-sm  mr-1 col-sm-2"  name="question_choice_b[]" value="" placeholder="Input 2nd choice ">
  31.                         <input type="text" id="field"  class="form-control form-control-sm  mr-1 col-sm-2"  name="question_choice_c[]" value=""  placeholder="Input 3rd choice ">
  32.                         <input type="text" id="field"  class="form-control form-control-sm  mr-1 col-sm-2"  name="question_choice_d[]" value="" placeholder="Input 4th choice ">
  33.                       <select id="field"  class="form-control form-control-sm  mr-1 col-sm-1" name="answer[]"  >
  34.                             <option value="">Answer</option>
  35.                              <option value="1"> 1st choice  </option>
  36.                              <option value="2"> 2nd choice </option>
  37.                              <option value="3"> 3rd choice </option>
  38.                              <option value="4"> 4th choice </option>
  39.                       </select>
  40.                         
  41.                   </div>
  42.                       <div class="clearfix mt-4">
  43.                         <button type="button" id="add-button" class="btn btn-success btn-sm float-left text-uppercase shadow-sm"><i class="fas fa-plus fa-fw"></i> Add</button>
  44.                         <button type="button" id="remove-button" class="btn btn-danger btn-sm float-left text-uppercase ml-1" disabled="disabled"><i class="fas fa-minus fa-fw"></i> Remove</button>
  45.                         <button type="submit" class="btn btn-primary btn-sm float-right text-uppercase shadow-sm">Submit</button>
  46.                       </div>
  47.         
  48.                       </div>
  49.                     </div>
  50.                  </form>
  51.             </div>
  52.           </div>
  53.           <!-- jquery-3.3.1 CDN -->
  54.           <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  55.           <!-- cdnjs.cloudflare CDN -->
  56.           <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  57.           <!-- bootstrapcdn CDN -->
  58.           <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  59.     </body>
  60. </html>

 

jquery code:

===========================

  1.       <script>
  2.               $(document).ready(function() {
  3.               var button_x_Add = $("#add-button");
  4.               var button_x_Remove = $("#remove-button");
  5.               var class_x_Name = ".dynamic-field";
  6.               var count_x = 0;
  7.               var field_x = "";
  8.               var maxFields_x = 5;
  9.               function totalFields() {
  10.                 return $(class_x_Name).length;
  11.               }
  12.               function addNewField() {
  13.                 count_x = totalFields() + 1;
  14.                 field_x = $("#dynamic-field-1").clone();
  15.                 field_x.attr("id", "dynamic-field-" + count_x);
  16.                 field_x.children("label").text("Field " + count_x);
  17.                 field_x.find("input").val("");
  18.                 $(class_x_Name + ":last").after($(field_x));
  19.               }
  20.               function removeLastField() {
  21.                 if (totalFields() > 1) {
  22.                   $(class_x_Name + ":last").remove();
  23.                 }
  24.               }
  25.               function enableButtonRemove() {
  26.                 if (totalFields() === 2) {
  27.                   button_x_Remove.removeAttr("disabled");
  28.                   button_x_Remove.addClass("shadow-sm");
  29.                 }
  30.               }
  31.               function disableButtonRemove() {
  32.                 if (totalFields() === 1) {
  33.                   button_x_Remove.attr("disabled", "disabled");
  34.                   button_x_Remove.removeClass("shadow-sm");
  35.                 }
  36.               }
  37.               function disableButtonAdd() {
  38.                 if (totalFields() === maxFields_x) {
  39.                   button_x_Add.attr("disabled", "disabled");
  40.                   button_x_Add.removeClass("shadow-sm");
  41.                 }
  42.               }
  43.               function enableButtonAdd() {
  44.                 if (totalFields() === (maxFields_x - 1)) {
  45.                   button_x_Add.removeAttr("disabled");
  46.                   button_x_Add.addClass("shadow-sm");
  47.                 }
  48.               }
  49.               button_x_Add.click(function() {
  50.                 addNewField();
  51.                 enableButtonRemove();
  52.                 disableButtonAdd();
  53.               });
  54.               button_x_Remove.click(function() {
  55.                 removeLastField();
  56.                 disableButtonRemove();
  57.                 enableButtonAdd();
  58.               });
  59.             });
  60.      </script>

 

Output: 

==============================

 

 

Thank You.............?

Tags: