时间戳

首页 > 解决方案 > 将滑块值从 html 表单导入到烧瓶应用程序

html - 将滑块值从 html 表单导入到烧瓶应用程序

问题描述

我有一个带有滑块的 HTML，我正在尝试将滑块的值获取到我的烧瓶应用程序中：

HTML

<form method="POST">
<div class="slidecontainer" id="slide_container_f">
<p>Faturamento:<span id="demo"></span></p>
<input type="range" min={{min}} max={{max}} value={{max}} class="slider" id="myRange" name="faturamento">
</div>
</form>

烧瓶应用

@app.route('/modelos',methods=['GET','POST'])
def modelos():
#to listen from slider
    faturamento=''
    if request.method == 'POST':
        faturamento=request.form['faturamento']
    return render_template("modelos.html",min=0,max=100)

但是， faturamento 永远不会使用滑块的值进行更新。你能给我一个提示，说明为什么我无法检索这些值吗？

标签： htmlflask

解决方案

您的表单中缺少一个提交按钮，用于将表单提交到服务器。您如何将表单提交到服务器？

HTML 应该看起来像

<form method="POST" action="{{url_for('modelos')}}">
    <div class="slidecontainer" id="slide_container_f">
    <p>Faturamento:<span id="demo"></span></p>
    <input type="range" min={{min}} max={{max}} value={{max}} class="slider" 
        id="myRange" name="faturamento">
    <input type="submit" value="Submit">
    </div>
</form>

当您点击提交时，该faturamento变量在您的烧瓶路线中获得的值是多少？你能打印出来看看值是多少吗？是没有？它是一个空字符串吗？

更新

如果您不想有提交按钮，那么您应该在滑块更改时使用 AJAX 调用与服务器通信

JS代码

$(function(){
    var form = $('form');
    $('#myRange').on('change mouseup', function(){
        $.ajax({
            type: "POST",
            url: form.action,
            data: form.serialize(),
        }).done(function(res){
            //do something with the response from the server
        });
    });
});

每当您释放鼠标时滑块发生变化时，它都会触发对您的modelos路由的 AJAX 调用，并且 的值faturamento应该是滑块的当前值。

推荐阅读