ajax success 後 form submit

jquery javascript ajax

st474ddr 2020-09-02 16:58:21 ‧ 3130 瀏覽

各位大大好
小弟碰到一個問題
現在有一個表單
這個表單的最後要填上個人設定的密碼
而目前我是藉由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('請輸入身分驗證碼');
        }
    })

看更多先前的討論...收起先前的討論...

archer9080 iT邦研究生 4 級 ‧ 2020-09-02 17:33:46 檢舉

F12有錯誤嗎?

st474ddr iT邦新手 2 級 ‧ 2020-09-02 17:35:33 檢舉

沒有喔

qpalzm iT邦新手 1 級 ‧ 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邦新手 2 級 ‧ 2020-09-02 17:57:40 檢舉

@ke11vin30 大大的想法小弟也有想過
我想就是用onsubmit的方式
但這樣我又碰到另外一個問題
使用這個方法無論他打對或打錯驗證碼
表單都會送出
就要想方法在錯誤的時候擋住他

不過主要我還是希望知道我原本的哪裡有問題啦XDD~

Season 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邦新手 2 級 ‧ 2020-09-02 18:00:51 檢舉

@xSummer大大正解!
這坑好久以前好像也踩過QQ

coder iT邦新手 5 級 ‧ 2020-09-02 18:36:44 檢舉

如果用k大的寫法
可以 e.preventDefault() 先防止表單送出
等到 response 回來為空 (正確)
再把表單 submit 出去

st474ddr iT邦新手 2 級 ‧ 2020-09-03 09:12:05 檢舉

@Coder 大大
其實兩個都卡在id的問題哈哈

柯柯 iT邦新手 3 級 ‧ 2020-09-03 13:29:59 檢舉

用 on submit 應該是失敗的時候沒有return false 讓他失效吧

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

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

iT邦好手 1 級 ‧ 2020-09-02 17:49:13

可以把response印出來看看
建議不要回傳空，可以考慮回傳布林值，這樣就可以寫成:

$(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代碼

回應 3
分享
檢舉

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

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

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

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

wolfwang iT邦研究生 4 級 ‧ 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邦新手 2 級 ‧ 2020-09-03 09:11:19 檢舉

原來如此
謝謝大大指教

登入發表回應

我要發表回答

立即登入回答

參賽組數

1123 組

團體組數

52 組

累計文章數

23096 篇

完賽人數

656 人

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css 程式設計 react vue.js

IT邦幫忙