表單Form的submit事件不響應的解決方法
更新時間:2008年10月17日 13:19:46 作者:
當用JS調(diào)用form的方法submit直接提交form的時候,submit事件不響應。
一、問題描述
類比一下,我用input.select()做了測試,卻能響應select事件。這個原因先放一邊,我們看看先怎么把眼下的問題解決了。
不響應事件的代碼示例:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
實際運行,不會有alert出來。
雖然用submit方法來提交表單有違Unobtrustive Javascript的原則,但有時候不得不用,比如做搜索提示(auto-complete)選中Item之后就需要用JS來提交搜索表單。
二、問題分析
既然本身不響應事件,那只有手工觸發(fā)這些事件了,確定手工觸發(fā)方案之前先回顧一下事件的注冊方式:
“原始”的注冊方式有兩種,看代碼示例:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
這樣的注冊事件,會給form增加了一個方法onsubmit。所以,可以通過直接執(zhí)行這個方法,等同于手工觸發(fā)了事件。
看代碼示例:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
這樣可以得到一個alert。
但是在如今“先進”的DOM2標準注冊方式以及IE的注冊方式attachEvent已經(jīng)很常用。這些注冊方式,onsubmit方法是不存在的,如果使用form.onsubmit()會直接報錯。
三、解決方案
當然“先進”的注冊方式本身也提供了手工觸發(fā)事件的解決方案,只是要針對DOM2標準和IE寫不同的程序,另外這個程序,對“原始”的注冊方式也一樣有效。請看代碼示例:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
四、代碼總結
這里不再對各細節(jié)方法做說明,不熟悉的朋友請自行查閱相關資料。我們把整個代碼串起來:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
整個跑下來有個小問題,F(xiàn)X下,不需要form.submit(),直接把表單給提交出去了,所以這句也省掉了,原因知道的請回復。
這個demo在IE6/IE7/FX下測試通過。
類比一下,我用input.select()做了測試,卻能響應select事件。這個原因先放一邊,我們看看先怎么把眼下的問題解決了。
不響應事件的代碼示例:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
實際運行,不會有alert出來。
雖然用submit方法來提交表單有違Unobtrustive Javascript的原則,但有時候不得不用,比如做搜索提示(auto-complete)選中Item之后就需要用JS來提交搜索表單。
二、問題分析
既然本身不響應事件,那只有手工觸發(fā)這些事件了,確定手工觸發(fā)方案之前先回顧一下事件的注冊方式:
“原始”的注冊方式有兩種,看代碼示例:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
這樣的注冊事件,會給form增加了一個方法onsubmit。所以,可以通過直接執(zhí)行這個方法,等同于手工觸發(fā)了事件。
看代碼示例:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
這樣可以得到一個alert。
但是在如今“先進”的DOM2標準注冊方式以及IE的注冊方式attachEvent已經(jīng)很常用。這些注冊方式,onsubmit方法是不存在的,如果使用form.onsubmit()會直接報錯。
三、解決方案
當然“先進”的注冊方式本身也提供了手工觸發(fā)事件的解決方案,只是要針對DOM2標準和IE寫不同的程序,另外這個程序,對“原始”的注冊方式也一樣有效。請看代碼示例:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
四、代碼總結
這里不再對各細節(jié)方法做說明,不熟悉的朋友請自行查閱相關資料。我們把整個代碼串起來:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
整個跑下來有個小問題,F(xiàn)X下,不需要form.submit(),直接把表單給提交出去了,所以這句也省掉了,原因知道的請回復。
這個demo在IE6/IE7/FX下測試通過。
相關文章
javascript中input中readonly和disabled區(qū)別介紹
javascript中input中readonly和disabled區(qū)別,在開發(fā)中可能會常有用到,利用js動態(tài)改變input的屬性2012-10-10
JS 無限級 Select效果實現(xiàn)代碼(json格式)
JS 無限級 Select效果實現(xiàn)代碼(json格式),學習js的朋友可以參考下。2011-08-08

