停止表單提交根據Ajax響應

Question

我使用的onsubmit =「返回check_for_conflict（）」來調用這個函數：

function check_for_conflict(){ 
var client_id = $('#agent_select').val(); 

//Stop submit if no agent selected. 
if (client_id == 0){ 
    alert("Please select an agent.") 
    return false; 
} 
var duration = $('#select_job_duration').val(); 
var id = $('#input_id').val(); 
var dat = $('#input_date').val(); 
var st_time = $('#input_st_time').val(); 

//Check if scheduling conflict and stop submit if there is a conflict. 
$.post("check_for_conflicts.php", { job_duration: duration, provider_id: id, job_date: dat, job_st_time: st_time }, 
    function(data){ 
     console.log(data.status); 
     if(data.status == 'conflict'){ 
      alert("There is a conflict with this time.") 
      return false; 
     } 
    }, "json" 
); 

//Continue submit if now scheduled conflicts. 
return true; 

}

我有兩個檢查，以阻止表單提交。第二次檢查取決於.post響應。這部分不起作用，因爲它在.post完成之前達到了最終的「返回true」。如何使用.post響應來停止提交表單？

Answer 1

當然，你可以（但不是這樣的），只是一直避免形式的提交，然後用本機阿賈克斯成功處理程序提交提交：

刪除內聯JS：

<form id="someform"> 
    <!-- form content --> 
</form> 

然後做：

$('#someform').on('submit', function(e) { 
    e.preventDefault(); 
    var form  = this, 
     client_id = $('#agent_select').val(); 

    if (client_id == 0) { 
     alert("Please select an agent."); 
    }else{ 
     var data = { 
      job_duration : $('#select_job_duration').val(), 
      provider_id : $('#input_id').val(), 
      job_date  : $('#input_date').val(), 
      job_st_time : $('#input_st_time').val() 
     }; 

     $.post("check_for_conflicts.php", data, function(result){ 
      console.log(result.status); 
      if($.trim(result.status) == 'conflict') { 
       alert("There is a conflict with this time.") 
      }else{ 
       form.submit(); 
      } 
     }, "json"); 
    } 
}); 

Answer 2

如何使用.post響應停止提交表單？

你不行。正如所觀察到的和指定的那樣，它是異步的。

您將需要以任何方式阻止該帖子，並對您的AJAX調用的成功功能進行編程式提交。也許事先設置一個變量來區分第一次提交和重新提交。