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>
            (function() {
              // INITIALIZATION OF ADD FIELD
              // =======================================================
              new HSAddField('.js-add-field')
            });
          </script>

Basic example

Preview
HTML

Add field

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

                  <div class="col-sm-9">
                    <input type="email" class="js-input-mask form-control" name="email" id="phoneLabelEg1" placeholder="Enter email" aria-label="Enter email">

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

                    <a href="javascript:;" class="js-create-field form-link">
                      <i class="bi-plus-circle me-1"></i> Add field
                    </a>
                  </div>
                </div>
                <!-- End Form -->

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

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

Preview
HTML

              
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Open modal</button>

                <!-- Modal -->
                <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">File attachment</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                      </div>

                      <div class="modal-body">
                        <form>
                          <!-- Form -->
                          <div class="js-add-field row mb-4"
                               data-hs-add-field-options='{
                                  "template": "#addEmailFieldTemplateModal",
                                  "container": "#addEmailFieldContainerModal",
                                  "defaultCreated": 0
                                }'>
                            <label for="phoneLabelEg2" class="col-sm-3 col-form-label form-label">Email</label>

                            <div class="col-sm-9">
                              <input type="email" class="js-input-mask form-control" name="email" id="phoneLabelEg2" placeholder="Enter email" aria-label="Enter email">

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

                              <a href="javascript:;" class="js-create-field form-link">
                                <i class="bi-plus-circle me-1"></i> Add field
                              </a>
                            </div>
                          </div>
                          <!-- End Form -->

                          <!-- Add Phone Input Field -->
                          <div id="addEmailFieldTemplateModal" style="display: none;">
                            <div class="input-group-add-field">
                              <input type="email" class="js-input-mask form-control" data-name="email" placeholder="Enter email" aria-label="Enter email">
                            </div>

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

                      <div class="modal-footer">
                        <button type="button" class="btn btn-white" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                      </div>
                    </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

Basic example

Modal example

Methods