时间戳

首页 > 解决方案 > javascript即使返回false也提交表单

javascript - javascript即使返回false也提交表单

问题描述

我有一个带有外部 URL 和方法 post 的操作的表单

<form name="myform" id="myform" action="externalurl.com" mehtod="post">
</form>

在页面底部，我的 javascript 标签如下所示，在表单提交时，我在控制器中通过 Ajax 调用了 JsonResult。

<script type='text/javascript'>

$('form#myform').submit(function () {
    var FirstName = $("#FirstName").val();
    var LastName = $("#LastName").val();

    $.ajax({
        type: "POST",
        url: "/umbraco/Surface/CheckoutMain/RegisterUser?FirstName=" + FirstName + "&LastName=" + LastName,
        dataType: "json",
        contentType: "application/json;charset=utf-8",
        success: function (response) {
            debugger
            if (response == "Yes") {
                return true;
            }
            else if (response == "RequiredFields") {
                alert("Please make sure all required fields are filled in.")
                return false;
            }
            else if (response == "No") {
                alert(response + "Please contact us!");
                return false;
            }
        }
    })
});
</script>

我只是不确定它为什么在我返回对 ajax 调用的响应之前提交。

有什么我做错了吗？

这里还有我控制器中的代码：

[HttpPost]
    public JsonResult RegisterUser(string FirstName, string LastName)
    {
        if (FirstName == "" || LastName == "" )
        {
            return Json("RequiredFields", JsonRequestBehavior.AllowGet);
        }
        else
        {
            return Json("Yes", JsonRequestBehavior.AllowGet);
        }
        return Json("No", JsonRequestBehavior.AllowGet);
    }

此外，如果我返回 No，它仍然会发布，并且如果我在上面的代码中放置断点并逐步执行，我可以看到该站点已经重定向到外部 URL。（我希望这是有道理的）。

如果有人有任何建议，我将不胜感激。

标签： javascriptajaxform-submit

解决方案

您$.ajax是异步的，因此success处理程序返回的任何内容都将被忽略；到那时，submit处理函数将完成（并且将返回undefined，而不是false）。

因为你不知道表单是否可以提交，直到响应返回后，你应该return false 不管，然后，如果响应正常，则手动提交表单，否则不要提交表单（并且只显示错误） ):

$('#myform').submit(function() {
  var FirstName = $("#FirstName").val();
  var LastName = $("#LastName").val();
  $.ajax({
    type: "POST",
    url: "/umbraco/Surface/CheckoutMain/RegisterUser?FirstName=" + FirstName + "&LastName=" + LastName,
    dataType: "json",
    contentType: "application/json;charset=utf-8",
    success: (response) => {
      if (response == "Yes") {
        this.submit();
      } else if (response == "RequiredFields") {
        alert("Please make sure all required fields are filled in.")
      } else if (response == "No") {
        alert(response + "Please contact us!");
      }
    }
  });
  return false;
});

您可能还注意到，因为文档中的 ID 是（或应该是）唯一的，所以可以随意使用 ID 选择器 ( '#myform')，也无需为其添加前缀form。

推荐阅读