Check out the demo on Codepen: https://codepen.io/vurghusm/pen/zVGjyr
isiaFormRepeater is simple and lightweight jquery form repeater plugin.
You can find a sample demo of how to use isiaFormRepeater in creating repeater fields in Wordpress plugins here
npm install
gulp
to compile scripts and start the dev server./demo/public
folderReference the following styles in your html header:
<link rel="stylesheet" href="https://github.com/vurghus-minar/isiaFormRepeater/blob/master/path_to_css_folder/isiaFormRepeater.css" />
Reference the following scripts in your html footer:
<!-- Jquery is a required dependency -->
<script src="https://github.com/vurghus-minar/isiaFormRepeater/raw/master/path_to_js_folder/jquery.js" type="text/javascript"></script>
<script
src="https://github.com/vurghus-minar/isiaFormRepeater/raw/master/path_to_js_folder/isiaFormRepeater.js"
type="text/javascript"
></script>
Create the repeater element as follows:
<div
class="isiaFormRepeater repeat-section"
id="repeaterElement"
data-field-id="test_field_id"
data-items-index-array="[1]"
>
<div class="repeat-items">
<div class="repeat-item" data-field-index="1">
<input
class="repeat-el"
id="test_field_id[1][test_sub1]"
name="test_field_id[1][test_sub1]"
/><input
class="repeat-el"
id="test_field_id[1][test_sub2]"
name="test_field_id[1][test_sub2]"
/>
</div>
</div>
</div>
data-field-id
is specified within the repeater-section
. It is the base ID of all repeat-item
.data-items-index-array
specifies index of repeater-item
in the array. E.g A value of [1] is the first item present in the initial form. This value should equivalent to data-field-index
in the corresponding repeater-item
repeat-el
are broken down as follows:
'test_field_id[1][test_sub1]'
'test_field_id' is the base id and is equal to the value specified in 'data-field-id'.
'[1]' the index following the base id is what will increase or decrease when new repeat items are added.
'[test_sub1]' is the unique identifier for the input field.
Initialize the script as follows in the footer:
<script type="text/javascript">
$(document).ready(function() {
$("#repeaterElement").isiaFormRepeater();
});
</script>