[SOLVED] Element JavaScript : Lock checkboxes | data deleted after saving form

[marcq]

Hi,

I want to lock the checkbox(es) of a databasejoin element in one of my form.

So I have created a Javascript load event with the following Javascript code :

$('gprh_fabrik_user_enrollment___choix_formation').getElement('input').disabled = true;

When, I'm loading my Form the Checkbox is locked, which is great (see attached file called locked) but if I'm saving my form, than the record is "deleted" (see attached file called after saving).

Is there another way to lock checkboxes without "losing" the data after saving ?

Thanks in advance for your feedback,

Marc

Video capture :

http://www.screencast.com/t/rzWT8vEo

 

[cheesegrits]

Yup, that's a well known issue with checkboxes. Not a Fabrik issue, it's just how HTML works. And you can't set them to readonly because that only stops values being changed, and selecting a checkbox doesn't change the value, it changes an attribute.

The was I usually do it is to bind false to the click event with .bind('click', false).

Hugh




Sent from my HTC One using Tapatalk

 

[marcq]

Thanks Hugh for your reply,

I have create a Javascript onclick event in my databasejoin Element with

$('gprh_fabrik_user_enrollment___choix_formation').bind('click', false);

but I can still click the checkbox in my form.

 

[cheesegrits]

You have to apply it to the checkboxes themselves not the container.


Sent from my HTC One using Tapatalk

 

[marcq]

You mean $('gprh_fabrik_user_enrollment___choix_formation[0]').bind('click', false); ?

 

[cheesegrits]

Sorry, I was on my phone and entering JS code is a major pain in the butt!

jQuery('#gprh_fabrik_user_enrollment___choix_formation input:checkbox').on('click', function(e) {
   e.preventDefault();
})

You can use bind(), but I keep forgetting it has been deprecated in favor of on(). Whether you return false or do preventDefault() depends on whether you want the click event to bubble up or not. Returning false will allow the event to bubble up, so any other events on the click will still get run. Running preventDefault() will stop the event there.

And best to be in the habit of using jQuery() rather than $().

-- hugh

 

[marcq]

No worries Hugh, thank you again for your dedication, I appreciate.

I have tried both preventDefault() and false and I can still uncheck the checkbox, and when it is unchecked I'm unable to check it again. I just should be unable to uncheck the checkboxes.

http://www.screencast.com/t/hD1vmIJvZOv

Cheers, Marc

 

[cheesegrits]

Works for me.

http://screencast.com/t/FtgEnJOkk

Also works if I run that command before clicking anything.

When / how are you running the code?

-- hugh

 

[cheesegrits]

I wouldn't do it with an element JS via the element settings. I'd put it in a form_X.js, wrapped in requirejs ...

requirejs('[fab/fabrik]', function() {
   jQuery('#gprh_fabrik_user_enrollment___choix_formation input:checkbox').on('click', function(e) {
      e.preventDefault();
   });
});

-- hugh

 

[marcq]

Hugh,

It is working now ! Form id was 32 and not 31 it is why it wasn't working.
Thank you for your always efficient support, Cheers, Marc

 

[cheesegrits]

Cool. BTW, just to make it more obvious to the user that the checkboxes are disabled, you should probably apply some css to grey them out.



Sent from my HTC One using Tapatalk

 

[marcq]

Cool. BTW, just to make it more obvious to the user that the checkboxes are disabled, you should probably apply some css to grey them out.



Sent from my HTC One using Tapatalk

Good idea ! I will do so, cheers