代码之家  ›  专栏  ›  技术社区  ›  pfyon

使用jQuery在提交时阻止表单重定向,直到函数完成

  •  0
  • pfyon  · 技术社区  · 15 年前

    有没有一种方法,使用jQuery,强制窗体在提交之前等待函数执行完毕?

    我有一个多字段表单上的提交按钮。我希望submit按钮点击服务器来确定当前用户在数据库中是否有任何项,如果没有,我希望它弹出一个确认窗口来确保用户知道。如果他们已经有一些项目,我想它跳过弹出窗口和提交正常。

    我用的是这样的东西:

    $('#done').click(function(event)
    {
        $.post(asyncController + "/checkItems", function(response)
                {
                    if(response != "true")
                    {
                        var test = confirm('Are you sure?');
                        if(test)
                        {
                            //submit
                        } else
                        {
                            event.preventDefaultAction();
                        }
                    }
                }
            );
    });
    

    不幸的是,表单没有等待javascript完成执行,我在加载下一页的中途得到了弹出窗口。

    1 回复  |  直到 15 年前
        1
  •  2
  •   redsquare    15 年前

    请尝试以下操作。总之,它阻止了submit按钮的click事件的默认提交操作,然后我们获取对form元素的引用,如果ajax调用和确认的结果为true,我们就提交这个表单。

        $('#done').click(function(event) {
    
            //prevent submit
            event.preventDefault();
    
            //get form reference
            var frm = this.form;
    
            $.post(asyncController + "/checkItems", function(response) {
    
                if (response != "true") {
    
                    var test = confirm('Are you sure?');
    
                    if (test) {
                        //submit the form
                        frm.submit();
                    } 
    
                }
            });
    });