Replicate Form Fields From A Custom Template - multiForm

Replicate Form Fields From A Custom Template - multiForm

Yet another jQuery based form clone plugin that duplicates form sections from a specified template and adds a prefix to ids, names, and attributes of form fields and labels.

Compatible with Bootstrap and Materialize frameworks.

1. Add jQuery library (slim build) and the jQuery multiForm plugin's script to the page.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="multiform.min.js"></script>

2. Create a template instance of the form to be replicated.

<div class="multiform-template" data-prefix="test_prefix">
  <div id="test_prefix-add_button">
    New Ingredient
  </div>
  <!-- Comments will be ignored when templating the form out -->
  <div class="input-field col m8">
    <select name="ingredient" required id="id_ingredient">
      <option value="" selected>---------</option>
      <option value="1">butter</option>
      <option value="2">flour</option>
      <option value="3">milk</option>
      <option value="4">eggs</option>
    </select>
    <label for="id_ingredient">Ingredient:</label>
  </div>
  <div class="input-field">
    <input type="text" name="quantity_amount" required maxlength="8" id="id_quantity_amount" />
    <label for="id_quantity_amount">Qty:</label>
  </div>
  <div class="input-field">
    <select name="quantity" id="id_quantity">
      <option value="" selected>---------</option>
      <option value="1">count</option>
      <option value="2">dozen</option>
      <option value="3">Dash</option>
      <option value="4">Pinch</option>
      <option value="5">Teaspoon</option>
      <option value="6">Tablespoon</option>
      <option value="7">Fluid ounce</option>
      <option value="8">Cup</option>
      <option value="9">Pint</option>
      <option value="10">Quart</option>
      <option value="11">Gallon</option>
    </select>
    <label for="id_quantity">Quantity:</label>
  </div>
  <div class="remove-container" class="input-field">
    <div class="remove-button">
      X
    </div>
  </div>
</div>

3. Initialize the plugin by calling the function on the template.

$( ".multiform-template" ).multiFormTemplate();

4. An optional function which will be called when clicking the 'Add' button and after the appendChild completes.

$( ".multiform-template" ).multiFormTemplate({
  postAddFunction: function() {
    //  do something
  }
});

This awesome jQuery plugin is developed by mvanorder. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 10.09.2018
  • Source