如何将滑块值从 html 表单导入 Flask 应用程序

Question

我创建了一个 html 表单，其中包含 6 个滑块和一个提交按钮。我想将滑块的值作为我的烧瓶应用程序的整数值

<form id="upload-form" action="{{ url_for('index') }}" method="POST" enctype="multipart/form-data">

        <fieldset>
        <!-- Hospital Slider -->    
            <div class="col-md-4">
                <h4>Hospital Services</h4>
            </div>  
            <div class="col-md-8">
                <div class="""slidecontainer">
                          <input type="range" min="0" max="100" value="50" class="slider" id="sliderHospital">
                          <br>
                </div>
            </div>

        <!-- Ambulance Slider -->   
            <div class="col-md-4">
                <h4>Ambulance Services</h4>
            </div>  
            <div class="col-md-8">
                <div class="""slidecontainer">
                          <input type="range" min="0" max="100" value="50" class="slider" id="sliderAmbulance">
                          <br>
                </div>
            </div>      

        <!-- School Slider -->      
            <div class="col-md-4">
                <h4>School Services</h4>
            </div>  
            <div class="col-md-8">
                <div class="""slidecontainer">
                          <input type="range" min="0" max="100" value="50" class="slider" id="sliderSchool">
                          <br>
                </div>
            </div>

        <!-- Fire and Rescue Slider -->     
            <div class="col-md-4">
                <h4>Fire and Rescue Services</h4>
            </div>  
            <div class="col-md-8">
                <div class="""slidecontainer">
                          <input type="range" min="0" max="100" value="50" class="slider" id="sliderFire">
                          <br>
                </div>
            </div>  

            <!-- Markets Slider -->     
            <div class="col-md-4">
                <h4>Markets and Shopping malls</h4>
            </div>  
            <div class="col-md-8">
                <div class="""slidecontainer">
                          <input type="range" min="0" max="100" value="50" class="slider" id="sliderMarket">
                          <br>
                </div>
            </div>

            <!-- Green spaces -->   
            <div class="col-md-4">
                <h4>Green spaces</h4>
            </div>  
            <div class="col-md-8">
                <div class="""slidecontainer">
                          <input type="range" min="0" max="100" value="50" class="slider" id="sliderparks">
                          <p>Value: <span id="demo"></span></p><br>
                </div>
            </div>


                <div class="col-md-6 col-lg-offset-2">
                    <button type="reset" class="btn btn-default" onclick="myFunction()">Cancel</button>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
                <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                              </div>
            </fieldset>
             </form>

这是我的烧瓶应用代码

from flask import Flask, render_template, request
from flask_wtf import FlaskForm
from wtforms import StringField, IntegerRangeField, PasswordField, TextAreaField, TextField, RadioField, SelectField, FileField, IntegerField, DateField
from wtforms.validators import InputRequired
import os
import os

app = Flask(__name__)
app.debug=True

app.config['SECRET_KEY'] = 'Thisisasecret!'

APP_ROOT = os.path.dirname(os.path.abspath(__file__))

class TestForm(FlaskForm):
    sliderHospital = DecimalRangeField('Hospital', default=0)

@app.route('/')
def index():
    return render_template('index.php')



if __name__=="__main__":
    app.run()

当我运行应用程序出现这个错误

ImportError: cannot import name IntegerRangeField

我想从表单中获取值并将它们保存为 Flask 应用程序中的 6 个独立变量。我错过了什么吗？

Answer 1

您应该为每个范围类型输入命名。您可以从 flask 的请求中获取该输入的值。

演示：

<html>
    <head></head>
    <body>
        <form method="POST" action="test">
            <input type="range" min="0" max="100" name="name_of_slider" />
            <input type="submit" value="submit" />
        </form>
    </body>
</html>


from flask import request
@app.route("/test", methods=["POST"])
def test():
    name_of_slider = request.form["name_of_slider"]
    return name_of_slider

如何将滑块值从 html 表单导入 Flask 应用程序

How to import slider values from a html form to flask application

python

flask

flask-wtforms