当前位置: 首页 > 知识库问答 >
问题:

Form.Submit()和Form.Reset()有问题

齐坚成
2023-03-14

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

谢谢!

共有1个答案

古畅
2023-03-14

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

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

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

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

 类似资料:
  • 我试图使用form.submit()向flask API提交POST请求,然后使用form.reset()重置表单。在我的javascript代码中,我能够执行form.submit()并成功地将数据发布到我的数据库中,但是,如果使用form.reset()执行此操作,则数据不会添加到我的数据库中,而是将表单重置。知道我为什么会这样吗? 烧瓶: HTML: JavaScript: 谢谢!

  • 问题内容: 我有以下代码: 我想捕获HTML响应?我该怎么做呢?我可以向form1.submit方法注册任何回调函数吗? 问题答案: 使用普通的javascript,您将无法轻松做到这一点。发布表单时,表单输入将发送到服务器,页面会刷新- 数据在服务器端处理。也就是说,该函数实际上不返回任何东西,它只是将表单数据发送到服务器。 如果您真的想用Javascript获得响应(无需刷新页面),则需要使用

  • 我现在正在做一个关于Collatz序列的问题。我必须找到最长的Collatz序列,如果我们从范围1开始,。。。,数字n的Collatz序列定义为:如果n mod 2==0,则下一个数字为n/2。如果n mod 2!=0那么下一个数字是3*n 1。n=10的顺序为10,5,16,8,4,2,1。 当然,如果我们用简单的方法来解决这个问题,我们会计算1,…,之间每个数字n的Collatz序列,。。。,

  • Symfony2有问题$excelService=$this- 显示的问题是 知道怎么解决这个问题吗? 顺便说一下,这是我的composer.json 但是我不能安装phpoffice/phpexcel,这是我最后一次尝试... 修改于25/06/2014 在Splendonia的帮助下,我能够以正确的方式安装/更新我的luiggioBundle,并意识到现在它有了一个新的应用编程接口。然后我运行

  • 本文向大家介绍form.submit()不能提交表单的原因分析,包括了form.submit()不能提交表单的原因分析的使用技巧和注意事项,需要的朋友参考一下 直接上代码把: 表单数据提交到本页面,下面是js处理 如果表单提交,在本页面有一段提示信息 结果是测试了许久都没有看到提示信息,以为是代码错了或者方法写错了,仔细核对,在结果官方文档,确认没有出错。 formId.submit()不能提交,

  • 问题内容: 我有一个代码, 我使用运行时锁定-解锁,因为我不希望例程1的打印与例程2混合使用。但是,执行上述代码后,其输出与没有锁定- 解锁的输出相同(意味着打印输出混合在一起)。谁能帮助我为什么这件事发生以及如何迫使这件事发生。 注意:我举了一个打印示例,但是有很多打印和发送事件。 问题答案: 如果您要 序列化 “打印某物”,例如,每个“打印某物”应自动执行,则只需对其进行 序列化即可 。 您可