如何在Flask中使用Bootstrap Ti Ta Toggle复选框 [英] How to utilize Bootstrap Ti Ta Toggle Checkbox with Flask
问题描述
Python / Flask / Bootstrap菜鸟在这里。我正在尝试构建一个网络应用程序来控制扬声器选择器。我正在使用bootstrap和Ti-Ta Toggles来美化该应用程序，但基本上它由4-5个复选框/切换键组成。这是我的HTML现在的样子：
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>
因此，我要弄清楚的是如何处理复选框输入中的POST数据在我的Python / Flask应用中。我试图做一个简单的测试，如下所示：
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)
但是，我收到了Bad Request消息等。因此，我对此工作方式有些迷茫。是否应为每个切换创建单独的表单？我是否应该在request.args周围添加 try if语句？
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?
推荐答案
好的，以防万一以后有人偶然发现这篇文章并感到好奇，我能够弄清楚我的问题是。主要是我的问题是，默认情况下，复选框仅在选中时才会开机自检。因此，如果没有选中特定的框（在这种情况下，这是我在自举Ti-Ta Toggles中使用的拨动开关），则选中时将没有POST信息。
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.
在Flask / Python中，当您尝试为特定复选框/切换请求发布数据时，该数据不存在，那么您将收到错误的请求错误。例如，如果POST之后的复选框spkrs_02，则以下内容可能会产生错误。
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.
例如，如果您使用以下方法设置复选框（切换），则它看起来像这样（在HTML文件中）：
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.
还应注意的是，我使用了onclick = this.form.submit（），它有助于在单击切换开关/复选框时立即采取行动。老实说，我不确定这是否是处理此问题的正确方法，但对我来说效果很好。
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.
无论如何，祝你好运！
这篇关于如何在Flask中使用Bootstrap Ti Ta Toggle复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
