Add Field

How to use

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

              
                <script src="../assets/vendor/hs-add-field/dist/hs-add-field.min.js"></script>

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

              
                <script>
                  $(document).on('ready', function () {
                    // INITIALIZATION OF HS-ADD-FIELD
                    // =======================================================
                    $('.js-add-field').each(function () {
                      new HSAddField($(this)).init();
                    });
                  });
                </script>

Example

Preview
HTML

Address line

Add address

                    
                      <!-- Form Group -->
                      <div class="js-add-field row form-group"
                           data-hs-add-field-options='{
                              "template": "#addAddressFieldEgTemplate",
                              "container": "#addAddressFieldEgContainer",
                              "defaultCreated": 0
                            }'>
                        <label for="addressLineLabelEg1" class="col-sm-3 col-form-label input-label">Address line 2</span></label>

                        <div class="col-sm-9">
                          <input type="text" class="form-control" name="addressLineEg1" id="addressLineLabelEg1" placeholder="Your address" aria-label="Your address">

                          <!-- Container For Input Field -->
                          <div id="addAddressFieldEgContainer"></div>

                          <a href="javascript:;" class="js-create-field form-link btn btn-sm btn-no-focus btn-ghost-primary">
                            <i class="tio-add"></i> Add address
                          </a>
                        </div>
                      </div>
                      <!-- End Form Group -->

                      <!-- Add Phone Input Field -->
                      <div id="addAddressFieldEgTemplate" style="display: none;">
                        <div class="input-group-add-field">
                          <input type="text" class="form-control" data-name="addressLine" placeholder="Your address" aria-label="Your address">

                          <a class="js-delete-field input-group-add-field-delete" href="javascript:;">
                            <i class="tio-clear"></i>
                          </a>
                        </div>
                      </div>
                      <!-- End Add Phone Input Field -->

With libraries

This example uses Input mask and Select libraries.

Phone

Add phone

                    
                      <!-- Form Group -->
                      <div class="js-add-field row form-group"
                           data-hs-add-field-options='{
                              "template": "#addPhoneFieldPhoneTemplate",
                              "container": "#addPhoneFieldPhoneContainer",
                              "defaultCreated": 0
                            }'>
                        <label for="phoneLabel" class="col-sm-3 col-form-label input-label">Phone</label>

                        <div class="col-sm-9">
                          <div class="input-group input-group-sm-down-break align-items-center">
                            <input type="text" class="js-masked-input form-control" name="phone" id="phoneLabel" placeholder="+x(xxx)xxx-xx-xx" aria-label="+x(xxx)xxx-xx-xx"
                                   data-hs-mask-options='{
                                     "template": "+0(000)000-00-00"
                                   }'>

                            <div class="input-group-append">
                              <!-- Select -->
                              <div class="select2-custom">
                                <select class="js-select2-custom custom-select" size="1" style="opacity: 0;" name="phoneSelect"
                                      data-hs-select2-options='{
                                        "minimumResultsForSearch": "Infinity",
                                        "dropdownAutoWidth": true,
                                        "width": "6rem"
                                      }'>
                                  <option value="Mobile" selected>Mobile</option>
                                  <option value="Home">Home</option>
                                  <option value="Work">Work</option>
                                  <option value="Fax">Fax</option>
                                  <option value="Direct">Direct</option>
                                </select>
                                <!-- End Select -->
                              </div>
                            </div>
                          </div>

                          <!-- Container For Input Field -->
                          <div id="addPhoneFieldPhoneContainer"></div>

                          <a href="javascript:;" class="js-create-field form-link btn btn-sm btn-no-focus btn-ghost-primary">
                            <i class="tio-add"></i> Add phone
                          </a>
                        </div>
                      </div>
                      <!-- End Form Group -->

                      <!-- Add Phone Input Field -->
                      <div id="addPhoneFieldPhoneTemplate" class="input-group-add-field" style="display: none;">
                        <div class="input-group input-group-sm-down-break align-items-center">
                          <input type="text" class="js-masked-input form-control" data-name="additionlPhone" placeholder="+x(xxx)xxx-xx-xx" aria-label="+x(xxx)xxx-xx-xx"
                                 data-hs-mask-options='{
                                   "template": "+0(000)000-00-00"
                                 }'>

                          <div class="input-group-append">
                            <!-- Select -->
                            <div class="select2-custom">
                              <select class="js-select2-custom-dynamic custom-select" size="1" style="opacity: 0;"
                                      data-name="additionlPhoneSelect"
                                      data-hs-select2-options='{
                                      "minimumResultsForSearch": "Infinity",
                                      "dropdownAutoWidth": true,
                                      "width": "6rem"
                                    }'>
                                <option value="Mobile" selected>Mobile</option>
                                <option value="Home">Home</option>
                                <option value="Work">Work</option>
                                <option value="Fax">Fax</option>
                                <option value="Direct">Direct</option>
                              </select>
                              <!-- End Select -->
                            </div>
                          </div>
                        </div>

                        <a class="js-delete-field input-group-add-field-delete" href="javascript:;">
                          <i class="tio-clear"></i>
                        </a>
                      </div>
                      <!-- End Add Phone Input Field -->

                    
                      <link rel="stylesheet" href="../node_modules/select2/dist/css/select2.min.css">

                    
                      <!-- JS Implementing Plugins -->
                      <script src="../node_modules/select2/dist/js/select2.full.min.js"></script>
                      <script src="../node_modules/jquery-mask-plugin/dist/jquery.mask.min.js"></script>

                      <script>
                        $(document).on('ready', function () {
                          // INITIALIZATION OF ADD INPUT FILED
                          // =======================================================
                          $('.js-add-field').each(function () {
                            new HSAddField($(this), {
                              addedField: function() {
                                $('.js-add-field .js-select2-custom-dynamic').each(function () {
                                  var select2dynamic = $.HSCore.components.HSSelect2.init($(this));
                                });

                                $('.js-add-field .js-masked-input').each(function () {
                                  var mask = $.HSCore.components.HSMask.init($(this));
                                });
                              }
                            }).init();
                          });

                          
                          // INITIALIZATION OF SELECT2
                          // =======================================================
                          $('.js-select2-custom').each(function () {
                            var select2 = $.HSCore.components.HSSelect2.init($(this));
                          });

                          
                          // INITIALIZATION OF MASKED INPUT
                          // =======================================================
                          $('.js-masked-input').each(function () {
                            var mask = $.HSCore.components.HSMask.init($(this));
                          });
                        });
                      </script>

Preview
HTML

                    
                      <!-- Button Trigger Modal -->
                      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                        Open modal
                      </button>
                      <!-- End Button Trigger Modal -->

                      <!-- Modal -->
                      <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                          <div class="modal-content">
                            <!-- Header -->
                            <div class="modal-header">
                              <h5 class="modal-title" id="exampleModalLabel">Add field</h5>
                              <button type="button" class="btn btn-icon btn-sm btn-ghost-secondary" data-dismiss="modal" aria-label="Close">
                                <i class="tio-clear tio-lg" aria-hidden="true"></i>
                              </button>
                            </div>
                            <!-- End Header -->

                            <!-- Body -->
                            <div class="modal-body">
                              <!-- Form Group -->
                              <div class="js-add-field row form-group"
                                   data-hs-add-field-options='{
                                      "template": "#addAddressFieldModalEgTemplate",
                                      "container": "#addAddressFieldModalEgContainer",
                                      "defaultCreated": 0
                                    }'>
                                <label for="addressLineLabelEg2" class="col-sm-3 col-form-label input-label">Address line 2</span></label>

                                <div class="col-sm-9">
                                  <input type="text" class="form-control" name="addressLineEg2" id="addressLineLabelEg2" placeholder="Your address" aria-label="Your address">

                                  <!-- Container For Input Field -->
                                  <div id="addAddressFieldModalEgContainer"></div>

                                  <a href="javascript:;" class="js-create-field form-link btn btn-sm btn-no-focus btn-ghost-primary">
                                    <i class="tio-add"></i> Add address
                                  </a>
                                </div>
                              </div>
                              <!-- End Form Group -->

                              <!-- Add Phone Input Field -->
                              <div id="addAddressFieldModalEgTemplate" style="display: none;">
                                <div class="input-group-add-field">
                                  <input type="text" class="form-control" data-name="addressLine" placeholder="Your address" aria-label="Your address">

                                  <a class="js-delete-field input-group-add-field-delete" href="javascript:;">
                                    <i class="tio-clear"></i>
                                  </a>
                                </div>
                              </div>
                              <!-- End Add Phone Input Field -->
                            </div>
                            <!-- End Body -->

                            <!-- Footer -->
                            <div class="modal-footer">
                              <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
                              <button type="button" class="btn btn-primary">Continue</button>
                            </div>
                            <!-- End Footer -->
                          </div>
                        </div>
                      </div>
                      <!-- End Modal -->

Methods

Parameters	Description	Default value
`createTrigger`	Trigger for add fields.	`.js-create-field`
`deleteTrigger`	Trigger for delete field.	`.js-delete-field`
`limit`	Limit of the fields.	`10`
`defaultCreated`	Count created by default fields.	`1`
`nameSeparator`	Separator for name attribute.	`_`
`addedField`	Call when field is added.	`function() {}`
`deletedField`	Call when field is removed.	`function() {}`

How to use

Example

With libraries

Modal example

Methods