Read and Write Boolean Values to Checkboxes

Wappler General Need Help
1

Wow... I've just spent forever working out how to do this and reading lots of posts that seemed very confusing for quite a while...

So here, while it is fresh in my head, is the bullet point summary of how to read and write boolean values to Checkboxes.

Background Information

In following why it is done this way, there are a couple of things to be aware of:

  • The result of an HTML <checkbox> tag's setting isn't the "value" attribute like HTML <input> tags, they have a value representing their "checked" attribute.

  • Hence if you want to understand the value being represented by your checkbox, you can't display {{checkbox_name.check.value}}, you can only display {{checkbox_name.checked}}... and by default this has values of true and false within Wappler, rather than 1 and 0.

  • If you set the "Static Value" field of the checkbox, then this is the value that will be passed through to your Server Action when the box is checked. However, no value is passed through when the box is unchecked!

  • Therefore you have to set a "default" value for your checkbox field on the Server Action side... so this is the value to pass to the database when the checkbox is unchecked.

  • In your database structure, in mySQL, you will probably have a field of type boolean which takes values 0 and 1

  • Hence the method outlined below maps the checked and unchecked values in HTML to and from the 0 and 1 values used in the database.

  • How to work will also vary slightly depending on whether you have a standalone <checkbox> or one of the "Bootstrap 4 Container" based ones contained in a checkbox group or custom switch structure.

Still with me?

While this all sounds complex, what you need to do is actually quite simple:

Writing Information To the Database

(If you don't have a checkbox group or custom switch container for the checkbox, perform the actions listed to be on the Bootstrap 4 Container directly on the <checkbox> element instead.

  1. On the Bootstrap 4 Container set Checkbox Static Value = 1
  2. In your Server Action, set the $_POST variable to be of type Boolean
  3. In the Server Action database update action, set your boolean field to be updated to the value {{$_POST.your_fieldname.default(0)}}

Reading Information From the Database

  1. On the Bootstrap 4 Container, set the Dynamic Attribute "Checked" to the field value being returned by your database via the Server Connect element.

For more Information
See:
How to bind the value to checkbox

3 Likes
2

Actually checkboxes can have a value but it is submitted only when checked :slight_smile:

Btw on your code you have errors .check.checked should be just .checked

1 Like
3

I have so many uses for checkboxes/groups and radio buttons/groups but they are still such a mysterious beast for me. One of these days I will get my head around how they work.

2 Likes
4

Thanks for the feedback @George!

I have updated the post according to your points. :slight_smile:

5

Thank you so much, Antony, for documenting this. It was just what I needed, concise bullet point steps to enable me to check through what I had that wasn’t working and make the necessary changes to get it working.

1 Like
6

Thanks Antony! This helped me quickly get past my check-box issue.

1 Like
7

Thank you Anthony. You got me almost home on this one. I hope I'm adding to this thread since this subject caused me a lot of time today...

I wanted to use a checkbox to enable/disable a feature. I needed the checkbox to reflect the current setting in the database (boolean) on page load, and I needed to send an update if the checkbox state was changed.

Showing the Checkbox State:
I use dmx-bind:checked="boolean_value_from_db_table_query" to set the visual checkbox state (checked/unchecked). Wappler/HTML will interpret a 1 as 'true' and 0 as 'false'. The checkbox state visually reflects the 1 or 0 stored in the table.

When Sending An Update...
Since a state of unchecked sends no value, I use the following dmx-on:updated="scToggleMyFeature.load({is_feature_enabled: checked? '1' : '0'})
Where 'is_feature_enabled' is the table column name as well as a $_GET parameter in my server connect. This ensures that even when the checkbox is unchecked, my server connect gets sent a 0 over $_GET instead of nothing at all.

My server connect then is very simple. It takes the $_GET variable and assigns it to a new variable with type boolean. Then this boolean value gets used in the update query.

1 Like