Form.Submit（）和Form.Reset（）有问题

Question

我试图使用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
});

谢谢！

Answer 1

submit()不会立即提交表单。它设置一个提交，以便在事件循环空闲时发生。

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

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

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