【问题标题】:Flask Form Submit does nothingFlask Form Submit 什么都不做
【发布时间】:2018-06-22 16:47:18
【问题描述】:

点击提交按钮实际上什么也没做。提交空白表单将触发对必填字段的验证,但按要求填写表单会导致表单不提交/提交按钮什么也不做。模板有CSRF_Token,提交按钮在form标签中,form标签有指向正确方向的action属性。 Chrome 不会出现任何错误,所以我不知道如何继续。

views.py

@blueprint.route("register/", methods=['GET', 'POST'])
def register():
    """Renders register page."""
    form = RegisterForm()
    if request.method == 'POST':
        if not form.validate_on_submit():
            return render_template('main/register.html', page_title="Service Registration",
                                   form=form, form_success=False, media_types=current_app.config["ACCEPTED_"
                                                          "MEDIA_TYPE"])
        company, err = get_company(form.organization.data)
        if err:
            company, err = create_company(form.organization.data)
            if err:
                return render_template('main/register.html', page_title="Service Registration",
                                       form=form, form_success=False, message=err, media_types=current_app.config["ACCEPTED_"
                                                          "MEDIA_TYPE"])
        customer, err = get_or_create_customer(
            form.first_name.data + " " + form.last_name.data, form.email.data,
            company_id, form.position.data, phone_number
        )
        if err:
            return render_template('main/register.html', page_title="Service Registration",
                                   form=form, form_success=False, message=err, media_types=current_app.config["ACCEPTED_"
                                                          "MEDIA_TYPE"])
        if err:
            return render_template('main/register.html', page_title="Service Registration",
                                   form=form, form_success=False, message=err, media_types=current_app.config["ACCEPTED_"
                                                          "MEDIA_TYPE"])
        else:
            return render_template('main/register.html', page_title="Service Registration",
                                   form=form, form_success=True, message=success_msg, media_types=current_app.config["ACCEPTED_"
                                                          "MEDIA_TYPE"])
    return render_template('main/register.html', page_title="Service Registration",
                           form=form, media_types=current_app.config["ACCEPTED_"
                                                          "MEDIA_TYPE"])


@blueprint.route("register/", methods=['POST'])
def upload_register():
    """Handles file upload POSTs."""
    first_name = request.form.get("first_name")
    last_name = request.form.get("last_name")
    name = request.form.get("first_name") + " " + request.form.get("last_name")
    email = request.form.get("email")
    filename = request.form.get("filename")
    file_type = request.form.get("file_type")

    if filename == '':
        response = make_response("No selected file")
        return response, 400
    if check_file_type(file_type):
        filename = clean_filename(filename)
        filename = secure_filename(filename)
        filename = unique_filename(filename)
        response = generate_presigned_post(filename, file_type)
        # CREATE DB REFERENCE
        url = "http://nevcodocs.s3.amazonaws.com/Uploads/{}".format(filename)
        instance = CustomerFileUpload.query.filter_by(url=url).first()
        if not instance:
            instance = CustomerFileUpload(url=url, email=email, name=name)
            db.session.add(instance)
            db.session.commit()
        else:
            instance.update(created_at=datetime.utcnow())
        return response, 200
    else:
        response = make_response("Invalid file type")
        return response, 500

javascript/jquery

// Enables/disables form submission and colors button accordingly
        var enableSubmit = function(enabled) {
            if (enabled) {
                $('#submit_ticket').removeAttr('disabled');
                $('#submit_ticket').removeAttr('style');
            } else {
                $('#submit_ticket').attr('disabled', 'disabled');
                $('#submit_ticket').attr('style', 'background-color: rgba(244, 121, 32, 0.5) !important; border-color: rgba(244, 121, 32, 0.25) !important;');
            }
        };

$('#ticket-form').submit(function(event) {
            enableSubmit(false);
            showSpinner(true);
            var validated = true;

            var didSelectFile = true;
            didSelectFile = validateField('#upload') && validated;

            validated = didSelectFile && validated;

            if (didSelectFile && !validateContentType()) {
                $('invalid-upload-alert').show();
                validated = false;
            } else {
                $('#invalid-upload-alert').hide();
            }
            if (validated) {
                $('#filename').val($('#upload').val());
                $('#file_type').val($('#upload').prop('files')[0].type);
                $.ajax({
                    type: 'POST',
                    url: '/register/',
                    data: $('#ticket-form').serialize()
                }).done(function(data) {
                    var formData = new FormData();
                    for (var key in data.data.fields) {
                        formData.append(key, data.data.fields[key]);
                    }
                    formData.append('file', $('#upload').prop('files')[0]);
                    var req = new XMLHttpRequest();
                    req.onload = function() {
                        showSpinner(false);
                        $('#ticket-form-failed').removeClass("support-form-show");
                        $('#ticket-form-failed').addClass("support-form-hide");
                        $('#ticket-form').removeClass("support-form-show");
                        $('#ticket-form').addClass("support-form-hide");
                        $('#ticket-form-success').removeClass("support-form-hide");
                        $('#ticket-form-success').addClass("support-form-show");
                    };
                    req.onerror = function() {
                        showSpinner(false);
                        $('#ticket-form-failed').removeClass("support-form-hide");
                        $('#ticket-form-failed').addClass("support-form-show");
                    };
                    req.open('POST', data.url);
                    req.send(formData);
                }).fail(function(err) {
                    showSpinner(false);
                    $('#ticket-form-failed').removeClass("support-form-hide");
                    $('#ticket-form-failed').addClass("support-form-show");
                });
            } else {
                showSpinner(false);
                enableSubmit(true);
            }
            {% endif %}
            if (!validated) {
                event.preventDefault();
                showSpinner(false);
                enableSubmit(true);
            }
        });

【问题讨论】:

  • 这看起来很复杂。在我看来,您缺少 preventDefault。 $('#ticket-form').on("submit",function(event) { event.preventDefault();
  • 还有,为什么在函数末尾附近有一个{% endif %}
  • 我使用的是 jinja,因此使用的是 {% endif %}。我尝试添加preventDefault,但提交按钮仍然没有做任何事情。我还对代码进行了编辑,因此可能会造成混淆。
  • 请以纯 HTML(查看源代码)和脚本在页面中的样子发布呈现的表单
  • 问题是源代码太长了。

标签: python jquery flask flask-wtforms


【解决方案1】:

你写的东西看起来很复杂,为什么不尝试一些简单的东西呢-

@app.route("/connect",methods=['GET','POST'])
def connect():
    if request.method=='GET':
        return render_template('connect.html')
    if request.method=="POST":
        return render_template('Thankyou.html',name=request.form['name])

在你的 views.py 和你的 connect.html 表单中只写-

<form name="connect" method="post" action="{{ url_for('connect') }}">
        <input class="t1" type="text" id="email" name="email" placeholder="Your Email ID">
        <input class="t2" type="text"  id="name" name="name" placeholder="name">
        <button class="btn btn-primary but" type="submit">Send</button>
    </form>

最后一页,Thankyou.html可以是这个样子-

<p>Thanks for contacting me, {{ name }} </p>

【讨论】:

  • 嗯,我正在使用这个表单来获取用户输入到我拥有的众多字段中的数据,并为客户服务软件 (FreshDesk) 创建一张包含上述信息的工单,所以它更复杂比这个。
  • 那么您基本上需要将这些字段中的所有数据都获取到您的服务器并对其进行处理,然后根据处理后的数据显示一张票?
猜你喜欢
  • 1970-01-01
  • 2018-02-04
  • 2015-05-14
  • 1970-01-01
  • 2019-07-05
  • 2019-03-08
  • 2016-12-24
  • 2017-04-18
  • 2011-08-03
相关资源
最近更新 更多