2021年1月31日 星期日

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

這次遇到的跟上回([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按下時隱含著將自動送出表單。


程式範例:

<!--HTML部分-->

<form id="testForm" name="testForm" action="test.jsp">

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

<input type="submit" value="送出" id="submitButton"/>

<%}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(),都會送出表單,沒寫時會送,寫了也是可以正常送

});


Copyright © 2021 JavaSparrowK All rights reserved.

版權所有‧謝絕轉載

沒有留言:

張貼留言

注意:只有此網誌的成員可以留言。