我试图使用form.submit()向flask API提交POST请求,然后使用form.reset()重置表单。在我的javascript代码中,我能够执行form.submit()并成功地将数据发布到我的数据库中,但是,如果使用form.reset()执行此操作,则数据不会添加到我的数据库中,而是将表单重置。知道我为什么会这样吗?
烧瓶:
class Signup(db.Model):
__tablename__ = 'signup'
user_id = db.Column(db.Integer, primary_key=True)
email = db.Column(db.String(200))
flag_1 = db.Column(db.String(1))
flag_2 = db.Column(db.String(1))
def __init__(self, email, flag_1, flag_2):
self.email = email
self.flag_1 = flag_1
self.flag_2 = flag_2
@app.route('/signup', methods=['POST'])
def signup():
if request.method == 'POST':
email = request.form['email']
flag_1 = request.form['flag_1']
flag_2 = request.form['flag_2']
if email == '':
return
if db.session.query(Signup).filter(Signup.email == email).count() == 0:
data = Signup(email, flag_1, flag_2)
db.session.add(data)
db.session.commit()
return
return
HTML:
<form
id="signup-form"
name="signup-form"
action="http://127.0.0.1:5000/signup"
method="post"
>
<label for="email">Email:</label>
<input type="text" id="email" name="email" /><br />
<label for="flag_1"> Flag 1:</label>
<input type="checkbox" name="flag_1" value="Y" /><br />
<input type="hidden" name="flag_1" value="N" />
<label for="flag_2"> Flag 2:</label>
<input type="checkbox" name="flag_2" value="Y" /><br />
<input type="hidden" name="flag_2" value="N" />
<button type="submit" id="signup-btn">Sign me up!</button>
</form>
JavaScript:
document.querySelector("#signup-btn").addEventListener("click", function () {
const signupForm = document.getElementById("signup-form");
signupForm.submit();
signupForm.reset(); // if i have just one of either submit or reset, they work, but if I have both, the form just resets
});
谢谢!
submit()
不会立即提交表单。它设置一个提交,以便在事件循环空闲时发生。
浏览器继续运行您的JS并重置表单。
然后表单提交,但由于您重置了它,因此使用默认值。
通常,在该阶段重置表单是没有意义的,即使不是这样。浏览器将导航到表单提交返回的页面,即使包含相同的HTML,呈现的表单也将包含该HTML中指定为默认值的值。