首页 > 解决方案 > 页脚包含一个带有提交按钮的表单,该按钮导致“方法不允许”

问题描述

我有一个页脚,每页上都包含一个表单。我不希望用户在提交表单时被重定向到页面。相反,onclick 按钮会引导用户更改同一页面上页脚中的文本。然而,每当用户输入他的电子邮件,并按下键盘上的“输入”而不是按钮时,页面会立即重定向到“不允许的方法”

请求的 URL 不允许该方法。”

 <form action="" method="POST">
                 <div id="theDiv" class="col-xl-auto col-md-6 col-12 pt-4 my-sm-0 order-6 ">
                <div class="form-group"><label for="email" class="mb-3"><b>Subscribe to our Mailing list</b></label><input type="email" name="email" class="form-control form-control-lg" placeholder="Enter email" id="email"></div><button type="button" class="buttonsqred btn btn-primary btn-lg btn-block my-2 Subscribe mt-4 mb-3" onclick="document.getElementById('theDiv').textContent = 'You Successfully Subscribed!'; document.getElementById('theDiv').style.color = 'red'" >Subscribe</button>
            </div>
            </form>

@app.route('/subscribers', methods=['POST', 'GET'])
def subscribers():
    title = "Subscribers"

    if request.method == "POST":
        subscriber_email = request.form['email']
        new_subscriber = Subscribers(email=subscriber_email)

# Push to DB

        try:
            db.session.add(new_subscriber)
            db.session.commit()
            return redirect('/subscribers')

        except:
            return "There was an error adding your Subscription"
    else:
         return render_template("subscribers.html")

标签: pythonhtmldatabaseflaskflask-sqlalchemy

解决方案


actionHTML 标记上的属性<form>为空,这就是它不起作用的原因。

action属性应该是/subscribers或者{{ url_for('subscribers') }}如果你想使用 Jinja。

您的type属性<button>button而不是submit,因此单击按钮不会发送表单。

例子:

<form action="/subscribers" method="POST"> ... </form>

<!-- Jinja Example -->

<form action="{{ url_for('subscribers') }}" method="POST"> ... </form>

如果您想在不重定向的情况下发送表单,这里已经回答了这个问题(纯 JavaScript 解决方案):https ://stackoverflow.com/a/54964425/11297557


推荐阅读