模态表格

Question

我试图通过我的烧瓶应用程序向我的电子邮件提交带有各种输入数据的模态表单，但是我收到400错误请求错误或“表单未定义”错误，因为我尝试在函数中使用此行：

form = modal1form(request.form)

不确定这里有什么不对 - 注意：模态位于/ dashboard / projects / #modal1
感谢

# new project function
@app.route('/dashboard/projects/#modal1form/', methods=["GET","POST"])
def new_project():
    try:

        if request.method == "POST":
            if form.validate() == False:
                flash('Invalid!  All fields are required.')
                return redirect(url_for('new_project'))

            else:
                msg = Message(request.form['name'], sender='request.form["email"]', recipients=['myemail@gmail.com'])
                msg.body = """
                From: %s %s \n
                %s \n \n %s \n \n %s \n %s \n
                %s
                """ % (request.form['wtype', 'wpack', 'bts', 'fts', 'comments'])
                mail.send(msg)

                flash('Congratulations! A new project has been submitted.')
                gc.collect()
                return render_template('dashboardProjects.html')

        elif request.method == 'GET':
            return render_template("dashboardProjects.html")

    except Exception as e:
        return(str(e))

模态表格

<div id="modal1" class="modal fade">

  <form method="post" action="{{ url_for('new_project') }}" role="form" id="modal1form" name="modal1form">
      <div class="form-group text-center">
         <label for="name" class="control-label text-center"> Name </label>
            <input type="text" class="form-control" name="name" id="name" placeholder="Your Name">
      </div>
      <div class="form-group text-center">
        <label for="email" class="text-center"> Email Address </label>
        <input type="email" class="form-control" name="email" id="email" placeholder="Your Email">
       </div>

<div class="col-md-3 col-md-offset-1">           
              <div class="form-group"> <br>
                <label for="wtype"> Website Type </label> <br>
        <h5 class="form-check-inline">
          <input class="form-check-input" type="checkbox" name="wtype" id="wtype1" value="Static"> Static
        </h5>
        <h5 class="form-check-inline">
          <input class="form-check-input" type="checkbox" name="wtype" id="wtype2" value="Blog"> Blog
        </h5> 
                </div>
</div>            
        <br>     

<div class="col-md-4 col-md-offset-1">
                    <div class="form-group">
        <label for="wpack"> Website Package </label> <br>
        <h5 class="form-check-inline">
          <input class="form-check-input" name="wpack" type="radio" id="wpack2" value="Blog"> Basic
        </h5>
        <h5 class="form-check-inline">
          <input class="form-check-input" name="wpack" type="radio" id="wpack3" value="Ecommerce"> Standard <br>
        </h5>    
                    </div>
</div>  

            <li class="dropdown pull-right list-unstyled" aria-expanded="false" style="position: top;"> <a class="dropdown-toggle" data-toggle="dropdown" role="button" style="font-size: 14px;">  <span class="caret"></span>  <label for="template"> <i class="fa fa-cube"></i> Template </label> </a> 
             <ul class="dropdown-menu list-unstyled">
      <li><h5 class="text-center"> <i class="fa fa-cubes"></i> Templates</h5></li>
  <li><a href="#" class="small" data-value="Basic Template1" tabIndex="-1"><input name="bts" type="radio"/>&nbsp;Basic Template 1</a></li>
  <li><a href="#" class="small" data-value="Basic Template2" tabIndex="-1"><input name="bts" type="radio"/>&nbsp;Basic Template 2</a></li>
                    <li role="separator" class="divider"></li>
  <li><a href="#" class="small" data-value="Footer 1" tabIndex="-1"><input name="fts" type="radio"/>&nbsp; Footer 1</a></li>

              </ul>
              </li>
 </div>

    <div class="form-group text-center"> <br>
        <label for="comments"> Other Details </label>
        <textarea name="comments" class="form-control" id="comments" placeholder="Additional comments, ideas, requests, questions?"></textarea>
        <p class="help-block"> </p>
     </div>
  </form>

  </div>     
      <div class="modal-footer brick">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="submit" class="btn btn-success" form="modal1form">Submit</button>
      </div>

Answer 1

错误1：表单未定义

如果您想使用Flask-WTF，您必须创建一个Form，如下所示：

from flask import Flask, render_template
from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField
from wtforms.validators import DateRrequired

app = Flask(__name__)
app.config['SECRET_KEY'] = 'a very secret string'

class MyForm(FlaskForm):
    name = StringForm('Your Name', validators=[DataRequired()])
    submit = SubmitField()

app.route('/', methods=['GET', 'POST'])
def index():
    form = MyForm()
    if form.validate_on_submit():
        name = form.name.data
        ...
    return render_template('index.html', form=form)

然后您需要在HTML模板中呈现表单：

<form method="post">
{{ form.name() }}
{{ form.submit() }}
</form>

错误2：400错误请求

在Flask中，如果您通过request.form['name']获取表单数据，则必须确保此输入具有值，这就是您收到400错误的原因。相反，我建议您使用request.form.get('name', default_value)，您可以设置默认值（作为第二个参数）以避免400错误。

更多细节： flask.pocoo.org/docs/0.11/patterns/wtforms

希望它会对你有所帮助。

可能错误3：引导模态

您无法打开带有锚名称的模态，例如example.com#MyModal，但其他模态插件可以。请在another question上查看我的答案。

在模态表单上未定义的错误请求/表单提交给电子邮件 - flask

模态表格

1 个答案: