表單送出前先以 ajax 方式檢查 phpcapcha 圖片驗證的問題

phpcapcha 使用方法



最近遇到一個問題。表單送出後，先執行一個 Javascript 函數，檢查各欄位資料有無問題，若有問題，立即以 return false 終止函數。其中最後一步是做圖片驗證的檢查，都通過之後再將表單送出。



這部份照理來說應該是循序執行，最後送出表單。但最近遇到的問題，圖片驗證不論怎麼打，隨便打，表單一定會送出。查了一陣子才發現是 ajax 的問題。先來看下列程式碼：

function checkForm(){
    //check account
    //...

    //check password
    //...

    //check phpcaptcha 
    var phpcaptcha_checked = 0;
    var ct_captcha = document.getElementById('ct_captcha').value;
    $.post("libs/ajax_phpcaptcha.php", {ct_captcha: ""+ct_captcha+""}, function(data){
        if(data=='error'){
            showErrorToast('Incorrect security code entered');
            return false;
        }else if(data=='success'){
            var phpcaptcha_checked = 1;
        }
    });
    
    //alert('isChecked='+isChecked+' isChecked='+isChecked);
    if(phpcaptcha_checked==1){
        document.getElementById('pgForm').submit();    
    }
}

原本預想的流程是這樣：一開始 phpcaptcha_checked 變數是 0 ，等到圖片驗證通過之後，再將 phpcaptcha_checked 改為 1 。然後當 phpcaptcha_checked = 1 的時候，將表單送出。



後來才發現 phpcaptcha_checked 的值永遠是 0 。因為 phpcaptcha_checked 是用 ajax + jquery 的方式做後端處理，而 ajax 的特性就是可以不重整頁面來更新資料。看看上面程式碼，回傳 success 那一行。雖然照理來說，回傳 success 之後 phpcaptcha_checked 應該就要變成 1 。但是 alert 出來的結果，即便圖片驗證的字串正確輸入， phpcaptcha_checked 的值還是 0 。



ajax 是可以在更新資料的時候，不用重整頁面。但我指定同一個東西，不是應該可以改變嗎？就像常用的：document.getElementById(id).innerHTML=xmlHttp.responseText，改變現有頁面上的某個元素啊。看起來，大概是函數裡的變數會重新指派吧。總之，要把把送出表單的指令移到 sucess 那一段裡面。

//check phpcaptcha 
    var ct_captcha = document.getElementById('ct_captcha').value;
    $.post("libs/ajax_phpcaptcha.php", {ct_captcha: ""+ct_captcha+""}, function(data){
        if(data=='error'){
            showErrorToast('Incorrect security code entered');
            return false;
        }else if(data=='success'){
            document.getElementById('pgForm').submit();    
        }
    });