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