How to utilize bootstrap toggle with flask

Question

This question is an extension of this question regarding using the Bootstrap toggle with flask.

My code for the toggle is as follows:

<div class='media'>
                <div class='media-left'>
                  <div class='media-object'>
                    <div class='padding-right'>
                      <form action="/menu" method="post">
                        <input name="toggle" onclick="this.form.submit()" data-off="&lt;i class='fa fa-times'&gt;&lt;/i&gt; " data-on="&lt;i class='fa fa-check'&gt;&lt;/i&gt; " data-onstyle='success' data-size='large' data-style='ios' data-toggle='toggle' id='activate-toggle' type='checkbox' value="on">
                        <input name="toggle" type="hidden" value="off">
                      </form>
                    </div>
                  </div>
                </div>
                <div class='media-body'>
                  <div id='console-event'></div>
                </div>
              </div>

And my endpoint for the page is as follows:

    @app.route('/menu', methods=['POST', 'GET'])
def get_callback():
    if request.method == 'POST':
        button = request.form['toggle']
        print(button)
    return render_template('dashboard.html')

However I am not able to get any response from my button.

I am very lost at this point. I have tried to copy the format of the question above however I still cannot get the button to print or even use the POST method.

Here are my questions:

1. How can I get a response from my button?
2. How do I save the orientation so that when the user logs back in the button is how they previously left it?

(I am using SQLAlchemy if this is of any importance.)

Any help would be greatly appreciated!

Thank you,

Jonah

Answer 1

It seems that the target of your form defined in action is incorrect. What I would try and do is change it to the following:

<form action="{{url_for('get_callback')}}" method="POST">

As for saving the toggled state, you might want to create a column in your db table with a default of off (or on) and then write some code to update the saved value for the switch state whenever a change is made to the toggle switch.

If anyone else has a better idea to store the state of the switch, I'd be interested to find out how.

Answer 2

First of all, you don't need this second hidden input. It's resulting in there being two values for toggle, which isn't what you want.

<input name="toggle" onclick="this.form.submit()" data-off="&lt;i class='fa fa-times'&gt;&lt;/i&gt; " data-on="&lt;i class='fa fa-check'&gt;&lt;/i&gt; " data-onstyle='success' data-size='large' data-style='ios' data-toggle='toggle' id='activate-toggle' type='checkbox' value="on">
<input name="toggle" type="hidden" value="off">

But more importantly, your code, as written would print to the console the value of button, then return to the user the HTML form input. Perhaps this would clear things up:

@app.route('/menu', methods=['POST', 'GET'])
def get_callback():
    if flask.request.method == 'POST':
        button = bool(flask.request.form.get('toggle', False))
        return "Toggle value: %r" % (button,)
    else:
        return render_template('dashboard.html')

If you do that, and remove that hidden input that shouldn't be there, it'll show the user "Toggle value: True" or "Toggle value: False" depending on which is clicked.

Though I don't see, in your example, how the user could submit the form without toggling the checkbox.

Answer 3

i would try it like that

@app.route('/menu', methods=['GET','POST'])
def get_callback():
    if request.method == 'POST':
        print(request.form.get('toggle'))

return render_template('dashboard.html')

if it does not work with ('toggle') try ('checkbox')