如何訪問引導滑塊的值（使用燒瓶）

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)

當我填寫此表單並提交時，不包含任何滑塊值數據。 以下是“ print 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')])

我是否缺少引導滑塊形式的值？ 我在首頁上找不到任何提及實際使用滑塊值的內容。

謝謝

Answer 1

為了使輸入傳遞到Flask中的表單，它需要name屬性。 只需嘗試在input放入name屬性，該值應出現在從request.form檢索的字典中。 例如： <input id="ex16b" type="text" name="slider_thingy"...>