Hope: [JSP] 當jQuery的click function內未明確寫出form.submit時，不會送出表單

2021年1月31日星期日

這次遇到的跟上回（[JSP] form.submit()在Chrome無法送出，但在IE正常，最後發現是因缺少submit button）很像，根本原因都是由於Chrome與IE在解構時的差異，

一樣是Chrome較嚴謹，而IE會對於submit button有隱含的處理方式。

由於已經有上次的經驗，這次同樣也是往form.submit的方向去追，果然是此緣故。

情境說明：以前在IE運作的程式可以送出表單，但到了Chrome卻沒有反應。

分析問題：

1.根據先前的經驗，先檢查該表單是否為完整的form (有設定id, name, action)。

2.並檢查表單內是否有submit button，雖然表單中的submit按鈕是依判斷條件決定是否顯示，但可以按下按鈕時(判斷條件成立)，看網頁的原始碼有正常出現，也就是當按鈕顯示時，瀏覽器應該可以正常抓到submit button。

3.檢查結果：表單設定完整，且該表單中有submit button，因此問題應非發生於HTML的部分。

4.本表單是在submit button按下click的時候，以jQuery控制送出。

5.往按鈕綁定的click function去追，發現Chrome有執行函式裡的動作：將按鈕disabled，但沒有後續送出表單動作。

問題解決：

1.直接推斷應該是要明確的寫出form.submit，Chrome才會送出表單，果然解決問題。

2.而IE則是不管有沒有寫form.submit，都會自動腦補，也就是submit button按下時隱含著將自動送出表單。

程式範例：

<%if(判斷條件成立){%>

<%}else{%>

<div id="testDiv">判斷條件成立才顯示按鈕</div>

<%}%>

</form>

//jQuery部分，綁定按鈕click時要處理的動作

$('#submitButton').click(function () {

//將按鈕設成disabled

$("#submitButton").attr("disabled", true).addClass('ui-state-disabled');

//原本沒有此行，只有IE可以送出表單，而Chrome沒有反應

$("#testForm").submit();

//加入上一行之後，Chrome才會送出表單，不然只執行click function裡指定的動作(將按鈕disabled)

//在IE則是不管是否有寫出submit()，都會送出表單，沒寫時會送，寫了也是可以正常送

});

2021年1月31日 星期日