How to utilize Bootstrap Ti Ta Toggle Checkbox with Flask

Question

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 consists of 4-5 checkbox/toggles. Here's what my HTML looks like right now:

<form name="input" action="/" method="post">
                  <div class="row">
                    <div class="col-md-6">
                      <table class="table">
                        <tbody>
                          <tr>
                            <td>Living Room</td>
                            <td>
                                <div class="checkbox checkbox-slider-lg checkbox-slider--a  checkbox-slider-info">
                                    <label>
                                        <input name="spkrs-00" type="checkbox" onclick="this.form.submit()" checked><span></span>
                                    </label>
                                </div>
                            </td>
                          </tr>
                          <tr>
                            <td>Kitchen</td>
                            <td>
                                <div class="checkbox checkbox-slider-lg checkbox-slider--a  checkbox-slider-info">
                                    <label>
                                        <input name="spkrs-01" type="checkbox" onclick="this.form.submit()"><span></span>
                                    </label>
                                </div>
                            </td>
                          </tr>
                          <tr>
                            <td>Dining Room</td>
                            <td>
                                <div class="checkbox checkbox-slider-lg checkbox-slider--a  checkbox-slider-info">
                                    <label>
                                        <input name="spkrs-02" type="checkbox" onclick="this.form.submit()"><span></span>
                                    </label>
                                </div>
                            </td>
                          </tr>
                          <tr>
                            <td>Unconnected</td>
                            <td>
                                <div class="checkbox checkbox-slider-lg checkbox-slider--a  checkbox-slider-info">
                                    <label>
                                        <input name="spkrs-03" type="checkbox" onclick="this.form.submit()" disabled><span></span>
                                    </label>
                                </div>
                            </td>
                          </tr>
                          <tr>
                            <td>Protection</td>
                            <td>
                                <div class="checkbox checkbox-slider-lg checkbox-slider--a  checkbox-slider-warning">
                                    <label>
                                        <input name="protection" type="checkbox" onclick="this.form.submit()"><span></span>
                                    </label>
                                </div>
                            </td>
                          </tr>

                          </tbody>
                      </table>
                    </div>

So, what I'm trying to figure out is how to handle the POST data from the checkbox inputs in my Python/Flask app. I was trying to do a simple test which looks like the following:

from flask import Flask, request, render_template
import time

app = Flask(__name__)

@app.route('/', methods=['POST','GET'])
def change():
    if request.method == 'POST':
        spkr_00_state = request.args['spkrs-00']
        spkr_01_state = request.args['spkrs-01']
        spkr_02_state = request.args['spkrs-02']
        protection_state = request.args['protection']
        speaker_states = [spkrs_00_state, spkrs_01_state, spkrs_02_state, protection_state]
        return render_template('index.html', speaker_states=speakers_states)
    else:
        return render_template('index.html')


if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=80)

However, I get Bad Request messages, etc. So, I'm a bit lost on how this should work. Should I create separate forms for each toggle? Should I put "try" if statements around the request.args?

Answer 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!