Another Checkbox Mystery

I can see plenty of requests for help in here with the checkbox. I thought “that will never happen to me”.
How wrong I was. Here I am with my checkbox issue…

My check box returns nothing when checked. An empty string is sent to the database. Why?
2022-10-18_09h11_40

Extra credit for answer to this:
My expectation is Wappler should send a ‘1’ or a ‘0’. What does it actually send (if it is working)?

Thank you for helping yet another newbie with a simple checkbox issue.

Hi Speedy,

You have to assign a checked value to it in the properties panel.

You are missing the value attribute in your code.

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="1" id="checkDeleteClientConfirm" name="checkDeleteClientConfirm" required="">
  <label class="form-check-label" for="checkDeleteClientConfirm">Confirm</label>
</div>

Thank you
So “static value” really means “the checked value”?
I entered ‘1’ as you said, yet it still send an empty string.
I’m completely stumped.

What if you add dmx-bind to the value?

dmx-bind:value="1"

I was wrong, your advice works. I had applied it to another checkbox by accident.
Thanks for your time, I must have spent 2 hours on this already.

1 Like

Glad it’s working for you! Good luck!

Sorry for wasting your time with my incorrect response…thanks so much!

1 Like

No worries, glad to help. :slight_smile:

That is not related to Wappler. That is how checkboxes work, according to HTML specs. The checkbox will send its value on form submit only if it is checked. And it it will send a value if a value="" is set.

You can learn how checkboxes function in more details here:

Especially this part:

Note: If a checkbox is unchecked when its form is submitted, there is no value submitted to the server to represent its unchecked state (e.g. value=unchecked ); the value is not submitted to the server at all.

2 Likes

This is a foreign concept to me for sure!
Checkboxes I’m used to working with (not in Wappler) have a ‘selected’ property of type boolean which will be always be either true or false. This is why I got confused. I’m learning that javascript/html is not a strongly-typed language but was hoping that Wappler components would add these types of properties to the Bootstrap components. A different world…

1 Like

Wappler is just using standard HTML elements and their standard behavior, according to the HTML specifications.

1 Like

In fact, I once had to extend a checkbox component to add a third state, ‘null’, needed for a particular application.

1 Like