Javascript on changed Kartik->Form->RadioList

Hi all, i’m building a Form using Kartik Form Builder.

I have a RadioList with 2 radiobutton (Yes and No).

I want intercept when user click on one radiobutton with Javascript but i don’t know how to do.

Beacuse in this extension the "really" radiobutton are hidden and they where substituted with other "display" element that already use javascript to simulate the classic radiobutton funciontality.

Here is an example html output:




<div class="form-group field-day-type">

	<label class="control-label" for="day-type">Question?</label>

	<input name="Day[type]" value="" type="hidden">

	<div id="day-type">

		<label class="radio-inline">

			<div aria-disabled="false" aria-checked="false" style="position: relative;" class="iradio_minimal">

				<input style="position: absolute; opacity: 0;" name="Day[type]" value="A" checked="" type="radio">

				<ins style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 0px none; opacity: 0;" class="iCheck-helper"></ins>

			</div>

			Yes

		</label>

		<label class="radio-inline">

			<div aria-disabled="false" aria-checked="true" style="position: relative;" class="iradio_minimal checked">

				<input style="position: absolute; opacity: 0;" name="Day[type]" value="R" type="radio">

				<ins style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 0px none; opacity: 0;" class="iCheck-helper"></ins>

			</div>

			No

		</label>

	</div>

	<div class="help-block"></div>

</div>



I’ve tried with a simple Jquery script like this




$('.field-day-type').click(function(){

    alert("test");

});



It works when i click in the div area with the exception of the 2 radiobutton, that probably conflict with other existing javascript.

Has someone the same problem and has solved it, or can someone give me some help?

Thank’s 1.000

Refer the response on github

Hi Kartik thank’s for your help. I try to do as you suggest like so:




$("input[name='Day[type]']").on('change', function() {

    if ($(this).val() == 'Y') {

        alert('Y');

    }

    if ($(this).val() == 'N') {

        alert('N');

    }

    alert('test');

});



but appear like event change is not triggered. So i try to do a test changing "change" with "click" like so:


$("input[name='Day[type]']").on('click', function() {

    if ($(this).val() == 'Y') {

        alert('Y');

    }

    if ($(this).val() == 'N') {

        alert('N');

    }

});



and when i click on hidden input radiobutton it works fine.

So i don’t know what i’m missing.

I attach the Event List loaded on each input radiobutton that i see using Firefox-Firebug

I see correctly my javascript Stz.js on change event, but it isn’t triggered. Can be a conflict with other change event?

Thank’s for help.

try using this
‘pluginEvents’=>[
“switchChange.bootstrapSwitch” => “function() {
data=$(this).is(’:checked’)
console.log(data)
}”,
],

1 Like