如何访问引导滑块的值（使用烧瓶）答案

【问题标题】：How do I access values for bootstrap-slider (using flask)如何访问引导滑块的值（使用烧瓶）
【发布时间】：2016-01-15 17:47:16
【问题描述】：

我正在使用以下 javascript bootstrap-slider（示例 6）：

https://github.com/seiyria/bootstrap-slider

我似乎无法从 POST 数据中提取选定的值。

这是在 html 页面中包含滑块的表单：

<form action="{{ url_for('filter') }}" method=post>
        <div class='slider-example'>
                <h4>Date-Time Range</h4>
            <div class="well">
                <p id="basicExample">
                    <!-- Date/time range form; requires js library at bottom -->
                    <input type="test" placeholder="Start Date" class="date start" name="startdate" value="{{ request.form.startdate }}">
                    <input type="test" placeholder="Start Time" class="time start" name="starttime" value="{{ request.form.starttime }}">  to  
                    <input type="test" placeholder="End Date" class="date end" name="enddate" value="{{ request.form.enddate }}">
                    <input type="test" placeholder="End Time" class="time end" name="endtime" value="{{ request.form.endtime }}">
                </p>
            </div>
                <hr>

                <h4>HDOP Range</h4>

            <div class="well">

                <input id="ex16b" type="text" data-slider-min="{{hdopmin}}" data-slider-max="{{hdopmax}}" data-slider-step=".01" 
                data-slider-ticks="[{{hdopmin}}, {{hdopmax}}]" data-slider-ticks-snap-bounds="1" data-slider-ticks-labels="['{{hdopmin}}', '{{hdopmax}}']" />

            </div>

                {{ form.submit }}


        </form>

此滑块的 javascript：

<script type='text/javascript' src="static/js/jquery.min.js"></script>
<script type='text/javascript' src="static/js/bootstrap-slider.js"></script>
<script type='text/javascript'>
    $(document).ready(function() {

        /* Example 6 */
        $("#ex6").slider();
        $("#ex6").on('slide', function(slideEvt) {
            $("#ex6SliderVal").text(slideEvt.value);
        });
        /* Example 16 */

        $("#ex16b").slider({
            min  : 0,
            max  : 10,
            value: [ 0, 10 ],
            focus: true
        });


    });
</script>

我正在尝试访问用户设置的滑块两个位置的值。我正在使用 {{hdopmin}} 和 {{hdopmax}} 动态设置范围的最小值和最大值。

我的app.py查看函数：

@app.route('/filter', methods=['GET', 'POST'])
def filter():
    conn = sqlite3.connect(database)
    c = conn.cursor()

    form = FilterForm()

    mx = c.execute('select max(hdop) from points where hdop is not "" limit 1')
    hdopmax = mx.fetchall()[0][0]

    mn = c.execute('select min(hdop) from points where hdop is not "" limit 1')
    hdopmin = mn.fetchall()[0][0]


    if request.method == 'POST':
        print request.form
        return 'Form posted.'

    elif request.method == 'GET':
        return render_template('filter.html', form=form, hdopmax=hdopmax, hdopmin=hdopmin)

当我填写并提交此表单时，没有包含任何滑块值数据。以下是“打印 request.form”的输出。如您所见，它包含所有日期时间信息，但没有任何范围选择值。

ImmutableMultiDict([('startdate', u'2015-10-14'), ('endtime', u'17:30:00'), ('enddate', u'2015-10-23'), ('starttime', u'17:30:00'), ('submit', u'Submit')])

我是否缺少引导滑块表单中的值或其他内容？我在主页上找不到任何提及实际使用滑块值的内容。

谢谢

【问题讨论】：

标签： javascript forms flask

【解决方案1】：

为了将输入传递到烧瓶中的表单，它需要name 属性。只需尝试在input 中输入name 属性，该值就会出现在从request.form 检索到的字典中。例如： <input id="ex16b" type="text" name="slider_thingy"...>

【讨论】：