jQuery Plugin To Duplicate Form Groups - addMore

File Size: 33.6 KB
Views Total: 4312
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Duplicate Form Groups - addMore

Just another jQuery based form builder plugin which allows to dynamically add and remove a repeatable group of form elements.

How to use it:

1. Download and include the jQuery addMore plugin after jQuery JavaScript library.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/addMore.js"></script>

2. Wrap the html elements you want to duplicate into an element.

<form action="">
  <p>
    <span>add more</span>
    <input type="text" placeholder="name">
    <select class="removeDuplication">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select>
    <select>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select>
  </p>
</form>

3. That's it. The plugin will automatically generate add / remove buttons to duplicate / delete specified form elements.

4. Available options and callback events.

addText: 'add more',
removeText: 'Remote',
selectBoxDuplicate: true,
avoidDuplicationSelection: function(e) {
  var o = e;
  if ($.inArray($(o).val(), selectedValue) != -1) {
      $(o).val(singlePreSelectedValue);
      alert('Value already selected.');
  } else {
      var hasSelectValue = true;
          /*dif = $.Deferred();*/
      $.each($('.removeDuplication'), function(i, v) {
          if ($(this).val() == 'select') {
              hasSelectValue = false;
              return false;
          }
          /*if (i == ($('.removeDuplication').length - 1)) {
              dif.resolve();
          }*/
      });
      /*dif.done(function() {
          if (hasSelectValue) {
              $('[data-id="more"]').show();
          }
      })*/
  }
},
prevSelectedValue: function(e) {
  var o = e;
  selectedValue = [];
  $.each($('.removeDuplication'), function(i, v) {
      if ($(this).val() != 'select') {
          selectedValue.push($(this).val());
      }
  });
  singlePreSelectedValue = $(o).val();
}

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