[網頁程式設計] 為什麼Submit按鈕失效?

作者: Fred F.M. Wang (FW知識瑣記) 日期:2019-11-22

在網頁程式設計時，有時候會發生很奇怪的錯誤，在某些狀況下按Submit按鈕，後端程式卻沒有執行
，其他狀況又不會有問題，除錯半天還是找不到錯誤。

第一種情況就是您的Javascript或jQuery的語法有錯，如果您不想自己一行一行檢視錯誤，就將程式
貼到網路上免費的線上語法檢查網頁檢查看看。 
如 codebeautify.org的JavaScript Validator  ，piliapp.com的Javascript Validator 等

如果語法都正確，那有可能是發生在按Submit按鈕時網頁內有隱藏的輸入區塊有必填(required)的輸
入欄位，這個欄位該輸入資料而沒有輸入，就會卡住Submit的送出。

因為這個輸入區塊在特定條件下才會顯示，測試時不容易發現。

解決方式就是 :

* 此區塊的輸入欄位不要設定為required欄位，在需要顯示此輸入區塊來輸入資料時，再透過
javascript或jquery設定為required

例如

/* 按下cfmbutton按鈕，開啟addbox區塊 */

 $("span#cfmbutton").click(function (e) {

    $('#addbox').css('display','table-row');  // 開啟addbox區塊

     $("input[name='f_plandlvdate']").attr('required', true);    // addbox區塊中的兩個欄位設為必填

    $("input[name='f_quantity']").attr('required', true);   

});

/* 按下closeaddbox按鈕, 關閉addbox區塊  */  

 $("button[name = 'closeaddbox']").click(function (e) {    

    $("input[name='f_plandlvdate']").attr('required', false);      // addbox區塊中的兩個欄位取消必填

    $("input[name='f_quantity']").attr('required', false);                

    $('#addbox').css('display','none');    // 關閉addbox區塊

 });