form.submit() 和 form.reset() 出现问题

Question

我正在尝试使用 form.submit() 向我的 flask API 提交 POST 请求，然后使用 form.reset() 重置表单。 在我的 javascript 代码中，我可以执行 form.submit() 并且数据已成功发布到我的数据库中，但是，如果我使用 form.reset() 进行操作，则数据不会添加到我的数据库中，但表单会重置. 知道为什么我会得到这个吗？

Flask：

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
});

谢谢！

Answer 1

submit()不会立即提交表单。 它设置了在事件循环空闲时发生的提交。

浏览器继续运行您的 JS 并重置表单。

然后表单提交，但使用默认值，因为您重置了它。

通常，即使不是这种情况，在那个阶段重置表单也是没有意义的。 浏览器将导航到从表单提交返回的页面，即使包含相同的 HTML，呈现的表单也将包含在该 HTML 中指定为默认值的值。