Add field

HS Add Field dynamic fields creation.

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>

Basic example

Add another input 
                    
                      <!-- Form Group -->
                      <div class="js-add-field row form-group"
                           data-hs-add-field-options='{
                              "template": "#addEmailFieldTemplate",
                              "container": "#addEmailFieldContainer",
                              "defaultCreated": 0
                            }'>
                        <label for="emailAddFieldExampleLabel" class="col-sm-3 col-form-label input-label">Email</label>

                        <div class="col-sm-9">
                          <input type="email" class="form-control" name="addressLine2" id="emailAddFieldExampleLabel" placeholder="Email address" aria-label="Email address">

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

                          <a href="javascript:;" class="js-create-field form-link btn btn-xs btn-no-focus btn-ghost-primary">
                            <i class="fas fa-plus mr-1"></i>
                            Add email address
                          </a>
                        </div>
                      </div>
                      <!-- End Form Group -->

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

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

With libraries

Add another input

JavaScript behavior

Extend

By assigning a variable, you can call the standard methods of the plugin:

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

Attributes

By assigning a variable, you can call the standard methods of the plugin:

              
                data-hs-add-field-options='{
                 ...
              }' - array

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-add-field-options='{}'

Attributes Description

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() {}