如何使用 jquery 和 javascript 提交或不提交表单答案

【问题标题】：How to submit or not a form using jquery and javascript如何使用 jquery 和 javascript 提交或不提交表单
【发布时间】：2012-07-02 03:50:42
【问题描述】：

我有这样的表格：

<form name="form" id="form" action="sub.php" onsubmit="return checkField();">
.
.
.
</form>

我的脑袋里有：

<script>
   function checkField(){
      var fieldToCheck = $('#field').val();
      $.post("checkField.php",{field:fieldTocheck},function(msg)){
         return msg=='ok';
      }
   }
</script>

问题是表单将始终提交。我知道$.post 中的返回是针对成功功能而不是针对功能checkField() .. 那我该怎么办？有人能帮我吗？谢谢！！

【问题讨论】：

首先您需要return false 来阻止表单提交。然后在ajax成功后，您可以通过javascript提交表单。请参阅下面的答案。

标签： php jquery ajax forms post

【解决方案1】：

试试这个，

 function checkField(){
      var fieldToCheck = $('#field').val();
      $.post("checkField.php",{field:fieldTocheck},function(msg)){
         return msg=='ok';
         // pure js submit() to stop checkField() to be called again
         $('#form')[0].submit();  
      }
      return false;
   }

【讨论】：

我认为 $('#form').submit();将发出另一个对 checkField 的调用

【解决方案2】：

您在表单中指定，onsubmit="return checkField();"

但是你的 checkField() 什么也没返回。

您必须返回 false 以表示中止并且不发布，或者返回其他东西来表示继续发布。

试试这个：

function checkField(){
  var fieldToCheck = $('#field').val();
  var okToSubmit = false;
  $.post("checkField.php",{field:fieldTocheck},function(msg)){
     if (msg=='ok')
        okToSubmit = true;
  }
  return okToSubmit();
}

此外，发送到 checkField 的帖子必须是同步的（async = False），否则 checkField() 函数将在检查字段是否正确之前返回其当前值 (false)，从而给您带来漏报。

尚未测试：

function checkField(){
  return $.post("checkField.php",{field:$('#field').val()},function(msg)){
     return ('ok' == msg);
  }
}

（最后一种形式更尴尬 - 你不能轻易地在第一种形式上添加更多测试）。

【讨论】：

【解决方案3】：

最难想到的是，在处理请求之前，您必须在您的 checkField 函数中返回一些值，因此解决方案之一是返回 false 并仅在成功时发布您的表单详细信息

<script>
function checkField(){
  var fieldToCheck = $('#field').val();
  $.post("checkField.php",{field:fieldTocheck},function(msg){
     if (msg=='ok') 
     {
        var $form = $('#form'),
        par = $form.serialize();
        $.post($form.attr('action'), par, function(){});
     }
  }
  return false;
});
</script>

【讨论】：

【解决方案4】：

1、防止提交事件：

$('#form').submit(function(event) {
event.preventDefault();
}

2nd，如果一切正常，继续提交

   function checkField(){
      var fieldToCheck = $('#field').val();
      $.post("checkField.php",{field:fieldTocheck},function(msg)){
         $('#form').submit();
      }
   }

【讨论】：