Skip to main content ↑ ↓
Topic: Client event: On change (Read 3458 times) previous topic - next topic

Client event: On change

In classic 2.5.1
Im trying to use a single event On change with a checkbox --> single swicth but no luck at this time

The following code works well with Checkbox --> Custom Inline :

$('#ctrl-bar_staff').on('change', function(){
  if ($(this).is(':checked')) {
    $("#ctrl-bar_staff_qty").show();
  } else {
    $("#ctrl-bar_staff_qty").hide();
  }
}).trigger('change');

As result,  the field bar_staff_qty is show when bar_staff is checked and hide when unchecked


I want to achieve the same but with a single swicth ( yes/no )
Can you help me on this ?
Thanks

Re: Client event: On change

Reply #1 –
@Eroll The below code should do the trick for you. The problem is that the single switch has two inputs, one is hidden while the other is visible. the hidden one has id property while the visible one does not have. When you toggle the single switch, the visible input holds the value in real time and the value is passed to the hidden input when the form is submitted. This means you can only get the value you want from the hidden one, which has no id property.

Code: [Select]
$('input[type=checkbox]').change(function () {
    if ($(this).val() == 'yes') {
        $("#ctrl-bar_staff_qty").show();
    } else {
        $("#ctrl-bar_staff_qty").hide();
    }
 });

Re: Client event: On change

Reply #2 –
By adding .trigger('change'); to your code it works fine.

Code: [Select]
$('input[type=checkbox]').change(function () {
    if ($(this).val() == 'yes') {
        $("#ctrl-bar_staff_qty").show();
    } else {
        $("#ctrl-bar_staff_qty").hide();
    }
 }) .trigger('change');

Thanks

Edit: works if only one of this kind into the form. If more than one, on.change occur for all  :-(  --> probably because no id define.
I you have tips for workaround this, i will be glad.

Re: Client event: On change

Reply #3 –
@Eroll You need to make Add Page  a Custom Page for you to archive what you want.

1. First of all, you need to do any configuration you want to do on the Add Page Fields and add all Client Event necessary for the single switches.
2. Assign Unique ids to your Single Switch Client Event for as many Single Switch you want to use. In the below image(ClientEvents.png) i created two Client Events and gave them unique ids i.e SingleSwitchBoxVal and SingleSwitchBoxVal2.
3. After that, you need to check the Custom checkbox, like step 1 in the image(CustomCode.png) below.
4. Next, you have to locate the Single Switch inputs you configured earlier on and add the unique IDs you created for each of them.

Now preview and enjoy.😎

Re: Client event: On change

Reply #4 –
Thanks Willvin, i will try that ;-)

Cheers
Eroll