shadow laurel
I've got a checkbox like this:
<input type="checkbox" name="serialized_components" value="1" class="form-control" data-toggle="toggle" data-style="ios" data-on="Yes" data-off="No" data-onstyle="success" data-offstyle="default">
If this is checked, it results in "null" in my controller. If I remove the data- attributes, it works. Any ideas what's happening?
The data attributes are related to the Bootstrap Toggle plugin.
pliant herald
I have no clue what the plugin does that you're using, but it seems there's a few important things to know. You're not using a when a checkbox is unchecked, its value won't be sent to the server, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkboxname attribute, without that it won't be sent to the server afaik. Perhaps the plugin does some magic there, you'll have to read the docs for that I think
Secondly,
Note: If a checkbox is unchecked when its form is submitted, there is no value submitted to the server to represent its unchecked state
shadow laurel
I’ve got a name attribute called “serialized_components”. When I remove the data attributes it works as it should. Ironically, I’m using the identical data attributes code on other check boxes around the app and they submit as expected. It’s very weird.
The data attributes for bootstrap toggle are for styling the checkbox
pliant herald
Ah right, yeah mb it's early 😅
Anyway, this needs JS, as data- attributes have no effect on its own, only for styling. So the data-on and data-off might not be doing it's thing? Without the JS you should see 1 when it's checked, as that's the value
shadow laurel
When I view the page source it shows value="1"
So strange that I've got nearly the identical code in another section of the app and it submits as expected. Here's that code, maybe I'm missing something:
<input type="checkbox" name="status" value="1" data-toggle="toggle" data-on="Active" data-off="Inactive" data-onstyle="success" data-offstyle="danger" data-size="small">
I've tried removing class="form-control" and data-style="ios" already.
shadow laurel
I think I've figured out the problem, but I'm still looking for a fix. The issue is that this checkbox is within a modal, and that's effecting the javascript
When I take that exact code snippet and post it on the main page, it works as expected, so it's the fact that it's inside the modal that's the issue....I think