在这种情况下,如何停止表单提交?

时间:2018-05-09 11:02:55

标签: javascript php jquery forms

我的目的是在提交完成之前检查某些条件或停止它并在该条件的结果为假时显示警告。我需要使用POST询问一个本地化在另一个PHP文档中的函数。 我将要展示的下一个案例,当“result!= 1”时警报正确显示,但是当我测试相反的情况“result == 1”时,提交无效:

$('body').on("submit","#idForm",function(event) {
        event.preventDefault();
        $.post( 'php_file_rute.php', {action:'functionName'})
            .done(function(result) {
                if (result == 1) {
                    if(functionNameInSameJSPage()){
                        return true;
                    }else{
                        return false;
                    }
                } else {
                    alert('error');
                    return false;
                }              
            });
    });

我尝试了另一种方式,将event.preventDefault置于每个“Return false”后面,但当“result!= 1”时,它会显示警告,但仍会进行提交。它发生在每一种情况下(提交都不会停止)。

$('body').on("submit","#formProyecto",function(event) {

    $.post( 'php_file_rute.php', {action:'functionName'})
        .done(function(result) {
            if (result == 1) {
                if(functionNameInSameJSPage()){
                    return true;
                }else{
                    return false;
                    event.preventDefault();
                }
            } else {
                alert("error");
                event.preventDefault();
                return false;
            }              
        });
});

正如您所看到的,我的目标是在“结果!= 1”时停止提交并显示提醒或在所有条件都可以的情况下提交。

有什么想法吗?

感谢。

3 个答案:

答案 0 :(得分:1)

您遇到的问题是您无法从异步函数返回任何内容 - 您的AJAX请求就是这样。

要解决此问题,您需要使用preventDefault()通过jQuery停止表单提交事件,然后在AJAX请求返回有效结果时引发另一个本机提交事件。第二个提交事件将不会由jQuery处理,并将根据您的要求提交表单。试试这个:

$(document).on("submit", "#idForm", function(e) {
  e.preventDefault();
  var form = this;

  $.post('php_file_rute.php', {
    action: 'functionName'
  }).done(function(result) {
    if (result === 1) {
      if (functionNameInSameJSPage()) {
        form.submit();
      }
    } else {
      alert('error');
    }
  });
});

这假设functionNameInSameJSPage()不是异步函数。如果是,那么你也需要在那里使用回调模式。

答案 1 :(得分:0)

这有点棘手,但你可以通过这样做来实现它:

$('body').on("submit","#idForm",function(event) {
        event.preventDefault();
        $.post( 'php_file_rute.php', {action:'functionName'})
            .done(function(result) {
                if (result == 1) {
                    if(functionNameInSameJSPage()){
                        $('#idForm').trigger("submit.force"); //Trigger submit again but under a different name
                    }
                } else {
                    alert('error');
                }              
            });
    });
    $('body').on("submit.force","#idForm", function () { return true; }); //Passthrough

我们的想法是重新触发事件,但确保不要调用相同的处理程序。

https://jsfiddle.net/2kbmcpa4/有一个概念证明(没有实际的ajax发生但是承诺模拟了这个,请注意这个例子在IE中不起作用)

答案 2 :(得分:-1)

解决问题的步骤:

  1. 在实际表格提交时,只需阻止该活动并拨打其余电话。
  2. 通过设置allowSubmit标志再次动态重新提交响应。
  3. 由于在第二次提交时设置了标志,因此不会阻止提交表单。重置allowSubmit标志。
  4. (function() {
        var allowSubmit = false;
        $('body').on("submit", "#idForm", function(event) {
            var that = this;
            if (!allowSubmit) {
                event.preventDefault();
                $.post('php_file_rute.php', {
                    action: 'functionName'
                }).done(function(result) {
                    if (result == 1) {
                        if (functionNameInSameJSPage()) {
                            allowSubmit = true; // set the flag so next submit will not go though this flow
                            that.submit(); // dynamically trigger submit
                        }
                    } else {
                        alert('error');
                    }
                });
            } else {
                allowSubmit = false; // reset the flag
            }
        });
    })();