在 ajax 響應中返回 false 不起作用並且表單不會取消提交

Question

我遇到了問題，如果我正在使用 ajax 調用，返回 false 不起作用..並且表單提交成功..我希望當我收到響應 1 表單時不要提交..但在 ajax 請求響應表單仍然提交請幫助我..

這是代碼：

<form action="<?php echo base_url(); ?>do/add/review" method="post" name="dologin" id="dologinsubmitreview" onSubmit="return showpopupbox();">


function showpopupbox(){      
    var strs = $("form").serialize();
          var autocompleteURL = "<?php echo base_url(); ?>grahak/save_record_session?rnd=" + Math.random() +"&sessiondata="+ $("form").serialize();
            $.ajax({
                    url : autocompleteURL,
                    async: false,
                    cache: false,
                    method : "POST",
                    success : function(respd)
                    {
                        if(respd == 1){
                            $("#classiconpopupbx").show();
                            return false;
                        }
                        else {
                            return true;
                        }
                    }
                });
}

Answer 1

您需要重新設計流程。 Javascript 是異步的，這意味着表單在 AJAX 調用完成之前提交了很長時間。

相反，使用 jQuery on綁定到事件，在函數中捕獲事件，並立即運行event.preventDefault()這將阻止表單提交。 然后運行你的 AJAX 調用。

在您的 AJAX 成功函數中，您需要決定當它返回“真實”時要做什么。 如果不了解更多關於您想要的結果，就不可能建議如何處理那件作品。

<!-- remove the inline onsubmit script handler -->
<form action="<?php echo base_url(); ?>do/add/review" method="post" name="dologin" id="dologinsubmitreview">


// no-conflict safe document ready
jQuery(function($) {
    // Bind to the form submit here, and call event.preventDefault immediately
    $('#dologinsubmitreview').on('submit', function(event) {
        event.preventDefault();
        showPopUpBox(event);
    }

    function showpopupbox() {      
        var strs = $("form").serialize();
        var autocompleteURL = "<?php echo base_url(); ?>grahak/save_record_session?rnd=" + Math.random() +"&sessiondata="+ $("form").serialize();
        $.ajax({
            url : autocompleteURL,
            async: false,
            cache: false,
            method : "POST",
            success : function(respd) {
                if(respd == 1){
                    $("#classiconpopupbx").show();
                } else {
                    // Do what you need to do here if the AJAX is true
                }
            }
        });
    }
});

Answer 2

您可以這樣做的一種方法是阻止提交，始終，然后如果您的 Ajax 調用返回 true，則發布表單（並告訴代碼這次允許它）：

首先，不要將內聯事件處理程序與 jQuery 混合使用。 jQuery 方式更好：

// Start by not allowing submit
var allowSubmit = false;
$('form').submit(function(){
    var $form = $(this);
    // Only run the ajax if this is not a "real" submit
    if (!allowSubmit){
        // do the ajax call
        $.ajax({
           url: ...
           success: function(respd){
              if(respd == 1){
                  $("#classiconpopupbx").show();
              }
              else {
                  allowSubmit = true;
                  $form[0].submit(); // important - bypass jQuery event handler
              }
           } 
        });
    }
    // Conditionally allow the form to submit
    return allowSubmit;
});