Add field

Blueberry 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

Preview
HTML

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 -->

In this example used Select2 and Input Mask libraries.

Add another input

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