input、button的不同type值在ajax提交表單時導致的陷阱
更新時間:2009年02月24日 02:34:04 作者:
最近在公司的項目中嘗試著利用YUI來實現(xiàn)各種效果。
今天在做利用connection 作表單提交過程中發(fā)現(xiàn),標簽"input"跟"botton"中的type屬性設(shè)置原來也是一門學問。
在開發(fā)過程中,為了使html代碼更加整潔,我首先利用YAHOO.util.Event.addListener(obj, "click", callback)類加載"click"事件來提交表單,YAHOO.util.Connect.asyncRequest('POST')方式來上傳表單數(shù)據(jù),如果表單信息不正確,那么作返回處理。而提交的按鈕我采用的是<button type="submit">提交</button>。
這時發(fā)現(xiàn)除了IE6能夠?qū)ξ业谋韱螖?shù)據(jù)作出正確的處理外,F(xiàn)IREFOX包括IE7都不能對我的錯誤處理作出回應(callback方法中,正對錯誤的處理方式是:只要一碰到錯誤,那么就通過return false的方式返回)。
這時在我的思路里想的是,在語句中提交表單數(shù)據(jù)前我已經(jīng)做了返回處理,可頁面怎么還是給刷新了呢。
晚上回到家里再次對今天碰到的問題做測試,結(jié)果發(fā)現(xiàn),我忽略了一點,數(shù)據(jù)也的確是有提交了,并且在地址欄中可以明確地看到各種數(shù)據(jù),而事實也證明,數(shù)據(jù)肯定是被提交了,于是想到了我的按鈕,按鈕的類別設(shè)置是"submit",之前在寫代碼時,都是直接在"input"或者"button"中,如果類別設(shè)置為"submit"時,都是這樣寫的onclick="return fun();"或者onclick="fun(); return false;";這自然是不會出現(xiàn)問題,怪就怪在,addListener類的值并不是直接影響到按鈕的,一點擊按鈕,自然也就會提交數(shù)據(jù)了。
慘痛啊~~~~
附:button默認type值為submit,因此最好標識下類別?。?!謹記!
在開發(fā)過程中,為了使html代碼更加整潔,我首先利用YAHOO.util.Event.addListener(obj, "click", callback)類加載"click"事件來提交表單,YAHOO.util.Connect.asyncRequest('POST')方式來上傳表單數(shù)據(jù),如果表單信息不正確,那么作返回處理。而提交的按鈕我采用的是<button type="submit">提交</button>。
這時發(fā)現(xiàn)除了IE6能夠?qū)ξ业谋韱螖?shù)據(jù)作出正確的處理外,F(xiàn)IREFOX包括IE7都不能對我的錯誤處理作出回應(callback方法中,正對錯誤的處理方式是:只要一碰到錯誤,那么就通過return false的方式返回)。
這時在我的思路里想的是,在語句中提交表單數(shù)據(jù)前我已經(jīng)做了返回處理,可頁面怎么還是給刷新了呢。
晚上回到家里再次對今天碰到的問題做測試,結(jié)果發(fā)現(xiàn),我忽略了一點,數(shù)據(jù)也的確是有提交了,并且在地址欄中可以明確地看到各種數(shù)據(jù),而事實也證明,數(shù)據(jù)肯定是被提交了,于是想到了我的按鈕,按鈕的類別設(shè)置是"submit",之前在寫代碼時,都是直接在"input"或者"button"中,如果類別設(shè)置為"submit"時,都是這樣寫的onclick="return fun();"或者onclick="fun(); return false;";這自然是不會出現(xiàn)問題,怪就怪在,addListener類的值并不是直接影響到按鈕的,一點擊按鈕,自然也就會提交數(shù)據(jù)了。
慘痛啊~~~~
附:button默認type值為submit,因此最好標識下類別?。?!謹記!
您可能感興趣的文章:
相關(guān)文章
用JAVASCRIPT如何給<textarea></textarea&
用JAVASCRIPT如何給<textarea></textarea>賦值...2007-04-04讓html的text輸入框只能輸入數(shù)字和1個小數(shù)點(0-59之間可改)
今天有同事需要這個功能,主要是限制用戶輸入不符合規(guī)范的數(shù)字與小數(shù)點導致不好計算價格問題,特整理了下面的代碼,需要的朋友可以參考下。2011-11-11javascript select options 排序(保持option 對象完整性)
select options 排序(保持option 對象完整性)2010-03-03