iT邦幫忙

0

ajax success 後 form submit

各位大大好
小弟碰到一個問題
現在有一個表單
這個表單的最後要填上個人設定的密碼
而目前我是藉由ajax的方式來判斷他填的密碼是否正確
(不想送出才在後端才檢查,因為中間有很多要填的東西是透過ajax動態產生的
如果使用者打錯了 原本他填的會消失)

按下"送出"按鈕(id="submit")
只要他打的密碼是正確的
response的值會回傳空
不然就會跟他說錯誤

但當我這樣寫
submit卻無法在ajax success裡面生效
那一段確實有跑 也沒有報錯
請教各位大大

以下code:

$(document).on("click",'#submit',function(){
        var chk_code = $('#check_code').val();
        if(chk_code != "") {
            $.ajax({
                url: "../ajax.php",
                method: "POST",
                data: {
                    check_code: chk_code,
                },
                async: false,
                dataType: "text",
                success: function (response) {
                    if(response == '') {
                        $('#form1').submit();
                    } else {
                        alert(response);
                    }
                },
            })
        } else {
            alert('請輸入身分驗證碼');
        }
    })
看更多先前的討論...收起先前的討論...
F12有錯誤嗎?
st474ddr iT邦新手 5 級 ‧ 2020-09-02 17:35:33 檢舉
沒有喔
ke11vin30 iT邦新手 5 級 ‧ 2020-09-02 17:50:47 檢舉
```
$("#form1").submit(function () {
var chk_code = $('#check_code').val();
if(chk_code != "") {
$.ajax({
url: "../ajax.php",
method: "POST",
data: {
check_code: chk_code,
},
async: false,
dataType: "text",
success: function (response) {
if(response == '') {
alert('成功');
} else {
alert(response);
}
},
})
} else {
alert('請輸入身分驗證碼');
}

});
```
改成這樣呢?
st474ddr iT邦新手 5 級 ‧ 2020-09-02 17:57:40 檢舉
@ke11vin30 大大的想法小弟也有想過
我想就是用onsubmit的方式
但這樣我又碰到另外一個問題
使用這個方法 無論他打對或打錯驗證碼
表單都會送出
就要想方法在錯誤的時候擋住他

不過主要我還是希望知道我原本的哪裡有問題啦XDD~
xSummer iT邦新手 4 級 ‧ 2020-09-02 17:57:49 檢舉
https://api.jquery.com/submit/
https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/240034/
st474ddr iT邦新手 5 級 ‧ 2020-09-02 18:00:51 檢舉
@xSummer大大 正解!
這坑好久以前好像也踩過QQ
coder iT邦新手 5 級 ‧ 2020-09-02 18:36:44 檢舉
如果用k大的寫法
可以 e.preventDefault() 先防止表單送出
等到 response 回來為空 (正確)
再把表單 submit 出去
st474ddr iT邦新手 5 級 ‧ 2020-09-03 09:12:05 檢舉
@Coder 大大
其實兩個都卡在id的問題哈哈
柯柯 iT邦新手 5 級 ‧ 2020-09-03 13:29:59 檢舉
用 on submit 應該是失敗的時候沒有return false 讓他失效吧

#另外我通常是用代碼當作回傳值去判斷是否驗證成功
可能 1 驗證成功 2 驗證失敗 3其他失敗原因 也可以這樣回傳

1 個回答

1
Peter學程式
iT邦新手 3 級 ‧ 2020-09-02 17:49:13
  1. 可以把response印出來看看
  2. 建議不要回傳空,可以考慮回傳布林值,這樣就可以寫成:
$(document).on("click",'#submit',function(){
        var chk_code = $('#check_code').val();
        if(chk_code != "") {
            $.ajax({
                url: "../ajax.php",
                method: "POST",
                data: {
                    check_code: chk_code,
                },
                async: false,
                dataType: "text",
                success: function (response) {
                    if(response) {
                        $('#form1').submit();
                    } else {
                        alert(response);
                    }
                },
            })
        } else {
            alert('請輸入身分驗證碼');
        }
    })

3.如果可以,能否提供整份JS代碼

st474ddr iT邦新手 5 級 ‧ 2020-09-02 17:54:29 檢舉

感謝大大的回覆
1.我有把response的印出來
確定ajax是可以正常運作的 回傳也抓的到

2.因為我後端直接用echo 的方式
所以用true會叫不回來哈哈

3.其實這就是全部的js了@@

wolfwang iT邦新手 3 級 ‧ 2020-09-02 18:31:52 檢舉

一般的作法不會回傳空值,空字串在 JS 也是 false,很容易產生bug,例如下面的程式碼會判定為 false

const response = ''; 

if(response) {
  console.log('true')
} else {
  console.log('false')
}
~   

比較好的作法是回傳一個 json 來作判斷,例如

正確:
{"isSuccess": true, "msg": "code match"}

錯誤:
{"isSuccess": false, "msg": "code dismatch"}
st474ddr iT邦新手 5 級 ‧ 2020-09-03 09:11:19 檢舉

原來如此
謝謝大大指教

我要發表回答

立即登入回答