Question

我使用以下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)

当我填写此表单并提交时，不会包含任何滑块值数据。以下是＆＃39; print request.form＆＃39;的输出。如您所见，它包含所有日期时间信息，但不包括所选范围的值。

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

我是否错过了bootstrap-slider表单中的值或什么？我无法在主页上找到任何提及实际使用滑块值的内容。

由于

Answer 1

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

如何访问bootstrap-slider的值（使用flask）

1 个答案: