javascript - 如何访问 bootstrap-slider 的值(使用 flask )

Question

我正在使用以下 javascript bootstrap-slider(示例 6):

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

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

这是在 html 页面中包含 slider 的表单:

<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>

此 slider 的 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>

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

我的 app.py View 函数:

@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)

当我填写并提交此表单时，没有包含任何 slider 值数据。以下是“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')])

我是不是在 bootstrap-slider 表单中遗漏了一个值？我在主页上找不到任何提到实际使用 slider 值的内容。

谢谢

Answer 1

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