3.0.2 • Published 8 years ago
dynamic-rows v3.0.2
Dynamic rows
jQuery plugin, which allows you to dynamically append and remove rows containing the html form elements.
Demo
A simple demo can be seen here
Usage example
Html structure (illustrative purposes only):
<form>
<div data-ssd-dynamic-wrapper>
<div class="row" data-ssd-dynamic-row>
<div class="medium-4 columns" data-ssd-dynamic-field>
<label for="product-0">
<span data-validation="product-0">
<span data-case="required">Invalid entry</span>
</span>
</label>
<input
type="text"
name="product-0"
id="product-0"
>
</div>
<div class="medium-4 columns" data-ssd-dynamic-field>
<label for="qty-0">
<span data-validation="qty-0">
<span data-case="required">Invalid entry</span>
</span>
</label>
<input
type="text"
name="qty-0"
id="qty-0"
>
</div>
<div class="medium-2 columns">
<a
href="#"
class="postfix button expanded"
data-ssd-dynamic-remove
><i class="fa fa-minus"></i></a>
</div>
<div class="medium-2 columns">
<a
href="#"
class="postfix button expanded dn"
data-ssd-dynamic-add
><i class="fa fa-plus"></i></a>
</div>
</div>
</div>
<input
type="submit"
class="button"
value="SUBMIT"
>
</form>
And to call the plugin:
$('[data-ssd-dynamic-wrapper]').ssdDynamicRows({
clear_warning: function(row) {
row.find('[data-validation] [data-case]').removeClass('show');
row.find(':input').removeClass('warning');
},
other_elements: {
'[data-validation]' : 'data-validation'
}
});
Optional arguments
event_type: // event type used with the `add` and `remove` buttons - default `click`
hide_css_class: // css class name that has its `display` property set to `none`.
// Used for hiding buttons - default `dn`
row: // row container identifier - default `[data-ssd-dynamic-row]`
button_add: // add button identifier - default `[data-ssd-dynamic-add]`
button_remove: // remove button identifier - default `[data-ssd-dynamic-remove]`,
other_elements: // object containing properties representing other elements i.e. `[data-validation]`
// and their associated values representing attribute of these elements
// that needs its value incremented with each new row i.e. `data-validation`
// `data-validation="product-0"`
divider: // divider for the attributes i.e. `product-0` - default `-`
clear_warning: // method to be executed on the newly created row
// example above shows how it can be used
// to clear all validation messages / styling from the row
// that has been used to clone / generate the new one