What Are jQuery Form Repeater and Select2?
If you have ever had to create an HTML form with a variable number of inputs then I am sure you came across a plugin called jQuery form repeater. This plugin is a really handy tool as it enables you to duplicate any sort of input in a Form with a click of a button!. I have used this plugin in many of my projects and it has worked fine for me but except for a single case of another jQuery plugin called Select2. Just like form repeater Select2 is another awesome jQuery plugin that gives you a customizable select box with support for searching, remote data sets, tagging, infinite scrolling, and many other useful options. But it has been a long-standing problem for many developers to make Select2 work with jQuery form repeater.
The Problem:
It’s all in the way both these plugins work by default. The Form Repeater duplicates the specified input on a button click but Select2 must be manually initialized using jQuery and is usually initialized on document ready.
The problem arises when you try to duplicate a Select2 field. It does not work because the Select2 is not initialized for the newly duplicated input!. So let us see the workaround to make Select2 work with Form Repeater.
Make Select2 Work with jQuery Form Repeater:
Here is a solution I came up with which involves initializing Select2 on form repeater button click!
A Typical jQuery Form Repeater Example:
<form class="repeater">
<div data-repeater-list="group-a">
<div data-repeater-item>
<input type="text" name="text-input" value="A"/>
<input data-repeater-delete type="button" value="Delete"/>
</div>
<div data-repeater-item>
<input type="text" name="text-input" value="B"/>
//select input with class select-2
<select class="select2" name="param">
<option value="AK">
Alaska
</option>
<option value="HI">
Hawaii
</option>
<option value="CA">
California
</option>
</select>
<input data-repeater-delete type="button" value="Delete"/>
</div>
</div>
<input data-repeater-create type="button" id="repeater-button" value="Add"/>
</form>Notice that I have assigned an id="repeater-button" button which triggers the form repeater? We will hook into this button’s click event and execute a jQuery function which will initialize the Select2 for all the inputs with class="select2"
Now Just Put This Script After the Body Tag:
<script type="text/javascript">
$("#repeater-button").click(function(){
setTimeout(function(){
$(".select2").select2({
placeholder: "Select a state",
allowClear: true
});
}, 100);
});
</script>If you execute the above function on the button click event, it assures that the function is only executed after the inputs have been duplicated, and waiting for just 100 milliseconds also guarantees that the input has already been duplicated.
Your Select2 should work now with form repeater!! but just make sure you initialize the original select2 input on document ready!
$( document ).ready(function() {
$(".select2").select2({
placeholder: "Select a state",
allowClear: true
});
});What do you think? Is there a better way of doing this? Share your thoughts in the comments below!!