● 問題:同樣的程式在IE可以送出表單,但Chrome卻無法送出。
● 情境說明:form.submit()的動作是寫在jQuery的$.ajax動作完成後,在success: function (response)裡送出表單。
● 釐清問題:
1.原本以為是Chrome無法接受.submit寫法,因此往瀏覽器語法部份去找。試了以下幾種寫法,都還是沒有辦法產生表單
//結果跟submit一樣,什麼都沒發生
$( "#form1" ).submit(function( event ) {
alert( "Handler for .submit() called." );
event.preventDefault();
});
//結果跟submit一樣,什麼都沒發生
$('#form1').on('submit',function(e) {
if($('#rpt').val() === "poop"){ //Sample error check
e.preventDefault();
alert($('#rpt').val());
}
});
//至少表單有送出,但是沒有開新視窗執行
var varForm = $(document.getElementsByName("form1"));
var tmp=varForm.attr('action');
$.post(tmp, varForm.serialize());
2.找了幾篇文章後,有人提到可能是html元件的問題,發現這才是我的情況。
我的情況是當情況A的時候,按下【查詢A】按鈕,要先觸發ajax,ajax成功時才呼叫form.submit()。
情況B的時候,按下【查詢B】按鈕,直接做form.submit()。
<form id="form1" name="form1" method="post" action="Qry.jsp" target="_blank">
if(cond A){
<input type="button" id="queryA" value="查詢A">
}else{
<input type="submit" id="queryB" value="查詢B">
}
● 解決方法:眼尖的您是否已經發現當情況A(cond A)的時候,JSP畫面上是沒有submit按鈕的。
也就是Chrome瀏覽器因為找不到submit按鈕,而無法進行form.submit的動作,因此什麼動作都沒進行;但IE可以在沒有按鈕的情況下繼續送出該表單。
只要在情況A裡面加入一個隱藏的submit按鈕,Chrome就可以跟IE一樣正常執行form.submit。
<form id="form1" name="form1" method="post" action="Qry.jsp" target="_blank">
if(cond A){
<input type="button" id="queryA" value="查詢A">
<input type="submit" id="queryASubmit" value="送出A" hidden>
}else{
<input type="submit" id="queryB" value="查詢B">
}
● 參考資料
1.Form SUBMIT not working in Chrome/3WA問題解決專家工作室
一開始是往這個方向去找,使用網頁中提到的$post寫法可以送出表單,但仍然無法達成我想要的開新視窗目的。
2.Form Submit not Working in Chrome?/Stack Overflow
文中有人建議他修改button name,以及有人提到他的Chrome console也沒有報錯,但清除cache之後就可用,因此給了我可能是html元件問題的靈感,最後發現是因缺少submit button造成Chrome無法送出。
Copyright © 2020 JavaSparrowK All rights reserved.
版權所有‧謝絕轉載
沒有留言:
張貼留言