Блог

Я пытаюсь отправить запрос POST в мой flask API с помощью form.submit(), а затем сбросить форму с помощью 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
});
 

Спасибо!

submit() не отправляет форму мгновенно. Он настраивает отправку, когда цикл событий свободен.

Браузер продолжает запускать ваш JS и сбрасывает форму.

Затем форма отправляется, но со значениями по умолчанию, потому что вы ее сбросили.

Как правило, сброс формы на этом этапе был бы бессмысленным, даже если бы это было не так. Браузер перейдет на страницу, возвращенную из отправки формы, даже если содержит идентичный HTML, отображаемая форма будет содержать значения, указанные по умолчанию в этом HTML.