Sunday, July 14, 2024
HomejQueryDuplicate, Take away, and Kind Rows In Kinds - jQuery formRowRepeater

Duplicate, Take away, and Kind Rows In Kinds – jQuery formRowRepeater


formRowRepeater is a light-weight jQuery plugin for dynamic kind row administration. Customers can add/duplicate kind rows, take away present ones, and alter their order by drag-and-drop. It really works with numerous enter sorts, together with enter fields, choose dropdowns, checkboxes, radio buttons, and extra.

The core perform of the plugin is to handle duplicate rows inside your varieties. Think about you are making a kind for an internet bill system. Every merchandise on the bill doubtless requires fields for the product identify, amount, and worth. As a substitute of hardcoding a number of situations of those fields, formRowRepeater enables you to outline a single “template row”. This template acts as a blueprint for producing new rows dynamically. The plugin then handles creating, indexing, and eradicating these rows.

As well as, formRowRepeater makes use of jQuery UI‘s draggable widget to allow drag-and-drop sorting of rows. That is helpful when order issues, like arranging duties in a mission administration utility. Every time a row is moved, the plugin routinely row order values. This info can then be processed on the server-side to take care of the right association of knowledge.

The way to use it:

1. Embrace the required jQuery and jQuery UI libraries in your doc.


<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/jquery-ui.min.js"></script>

2. Obtain the formRowRepeater.js script and embrace it in your doc after jQuery.


<script src="/path/to/jquery.formRowRepeater.js"></script>

3. Create an HTML kind with a container aspect for the repeating rows. Inside this container, place a single occasion of your “template row”. This template ought to embrace your required kind fields, a drag deal with, a take away button, and an enter discipline for the kind order:


<kind id="instance">
  <div id="form-rows">
    <div class="form-row template-row">
      <div class="deal with">
        Drag Deal with
      </div>
      <div>
        <enter sort="textual content" class="form-control" identify="workers[0][name]" placeholder="Enter worker identify">
      </div>
      <div>
        <choose class="form-select" identify="workers[0][dept]">
          <possibility worth="">Choose Division</possibility>
          <possibility worth="IT">IT</possibility>
          <possibility worth="Gross sales & Advertising">Gross sales & Advertising</possibility>
          <possibility worth="HR">HR</possibility>
          <possibility worth="Operations">Operations</possibility>
        </choose>
      </div>
      <div class="col-auto">
        <enter sort="textual content" class="form-control sort-order" identify="workers[{n}][sort_order]" worth="1" model="width: 100px">
      </div>
      <div>
        <button sort="button" class="btn btn-danger remove-row">
          Take away Button
        </button>
      </div>
      ... extra kind fields right here
    </div>
  </div>
  <button id="add-row">Duplicate Row</button>
</kind>

4. Name the perform on the HTML kind and customise its conduct by the next customization choices:


$('#instance').formRowRepeater({

  // Selectors
  templateRow: '.template-row',
  addRowButton: '#add-row',
  sortableContainer: this,
  rowClass: '.form-row',
  handleClass: '.deal with',
  removeButtonClass: '.remove-row',
  sortOrderClass: '.sort-order',

  // Allow nested performance
  degree: 0,

  // Callback perform
  afterAddedRow: null 
  
});

This superior jQuery plugin is developed by nabeeljavaid. For extra Superior Usages, please test the demo web page or go to the official web site.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments