如何根据ajax响应提交表单并停止提交表单

时间:2017-04-07 12:44:31

标签: jquery ajax

我正在使用带有onsubmit标签的表单。在onsubmit函数中,我将调用ajax,我将在成功函数中返回true,在错误部分返回false。 但总是提交表格。

HTML

<form action="/" method="post" onsubmit="return formsubmit()">

脚本

function formsubmit() {
"use strict";
var isBasic = $(".test").val() //this is hidden element
if (isBasic === "true") {      
    return true;
}
if (isBasic === "false") {      
        $.ajax({
            type: "post",
            url: "/",
            data: "sample",
            success: function (data) {
                if (data.success) {
                    return true;
                }
                if (!data.success) {                      
                    return false;
                }
            },
            error: function () {

            }
        });
    }
}

}

这对我不起作用。总是提交表格。 请帮我解决这个问题。

3 个答案:

答案 0 :(得分:2)

您希望从“formsubmit”函数中获取返回值是正确的,但是您无法从异步调用返回(ajax调用是异步的)。

重新构建代码以捕获按钮单击而不是响应表单提交。在按钮单击事件中执行ajax调用,将回调函数传递给ajax调用。在回调函数中决定是否提交表单。

答案 1 :(得分:0)

像这样改变你的代码。

function formsubmit() {
 "use strict";
 var isBasic = $(".test").val(); //this is hidden element

  if (isBasic === "false") {      
      $.ajax({
         type: "post",
         url: "/",
         data: "sample",
         success: function (data) {
            if (data.success) {
                return true;
            }
            if (!data.success) {                      
                return false;
            }
        },
        error: function () {

        }
    });
}else{
  return true;
}
 return false;
}
}

答案 2 :(得分:0)

function formsubmit() {
    "use strict";
    var isBasic = $(".test").val() //this is hidden element
    if (isBasic === "true") {      
        return true;
    }
    if (isBasic === "false" && !$(this).attr('submit-suggest')) {      
            $.ajax({
                type: "post",
                url: "/",
                data: "sample",
                success: function (data) {
                    if (data.success) {
                        $(this).attr('submit-suggest',1);
                        $(this).submit();
                    }
                    if (!data.success) {                      
                        $(this).attr('submit-suggest',0);
                    }
                },
                error: function () {
                    $(this).attr('submit-suggest',0);
                }
            });
        return false;
    }
    return true;
}