How To Utilize Bootstrap Ti Ta Toggle Checkbox With Flask

Python/Flask/Bootstrap noob here. I'm trying to build a web-app to control a speaker selector. I'm using bootstrap and Ti-Ta Toggles to beautify the app a bit, but basically it c

Solution 1:

OK, just in case someone else stumbles upon this post later and is curious, I was able to figure out what my issues were. Mainly, my issue was that by default checkboxes will only POST when checked. Therefore if you do not have a particular box checked (in this case it was the toggle switches I was using in bootstrap Ti-Ta Toggles) then there will be no POST information when checked.

In Flask/Python, when you try to request the post data for a particular checkbox/toggle, and it doesn't exist, then you will get a bad request error. For example, the following will likely generate an error if the checkbox spkrs_02 after POST.

spkr_state[1] = request.form['spkrs_02']

The way to get around this is to use a hidden input tag after the input tag for the checkbox. This will return a value in post, even if the input tag isn't checked/toggled.

For example it would look like something like this (in your HTML file) if you were setting up a checkbox(toggle) using :

<input name="spkrs_02"type="checkbox" onclick="this.form.submit()"><span>Kitchen</span>
<input name="spkrs_02"type="hidden" value="off">

That last line will, as mentioned above, provide some feedback in post, when the "box" is not checked.

Also a side note that I used onclick="this.form.submit()" which was helpful in tacking action on a toggle/checkbox immediately when it is clicked. I'll be honest that I'm not sure if that is the proper way to handle this, but it worked well for me.

Anyway, good luck!