表單Form的submit事件不響應(yīng)的解決方法
更新時(shí)間:2008年10月17日 13:19:46 作者:
當(dāng)用JS調(diào)用form的方法submit直接提交form的時(shí)候,submit事件不響應(yīng)。
一、問題描述
類比一下,我用input.select()做了測(cè)試,卻能響應(yīng)select事件。這個(gè)原因先放一邊,我們看看先怎么把眼下的問題解決了。
不響應(yīng)事件的代碼示例:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
實(shí)際運(yùn)行,不會(huì)有alert出來。
雖然用submit方法來提交表單有違Unobtrustive Javascript的原則,但有時(shí)候不得不用,比如做搜索提示(auto-complete)選中Item之后就需要用JS來提交搜索表單。
二、問題分析
既然本身不響應(yīng)事件,那只有手工觸發(fā)這些事件了,確定手工觸發(fā)方案之前先回顧一下事件的注冊(cè)方式:
“原始”的注冊(cè)方式有兩種,看代碼示例:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
這樣的注冊(cè)事件,會(huì)給form增加了一個(gè)方法onsubmit。所以,可以通過直接執(zhí)行這個(gè)方法,等同于手工觸發(fā)了事件。
看代碼示例:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
這樣可以得到一個(gè)alert。
但是在如今“先進(jìn)”的DOM2標(biāo)準(zhǔn)注冊(cè)方式以及IE的注冊(cè)方式attachEvent已經(jīng)很常用。這些注冊(cè)方式,onsubmit方法是不存在的,如果使用form.onsubmit()會(huì)直接報(bào)錯(cuò)。
三、解決方案
當(dāng)然“先進(jìn)”的注冊(cè)方式本身也提供了手工觸發(fā)事件的解決方案,只是要針對(duì)DOM2標(biāo)準(zhǔn)和IE寫不同的程序,另外這個(gè)程序,對(duì)“原始”的注冊(cè)方式也一樣有效。請(qǐng)看代碼示例:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
四、代碼總結(jié)
這里不再對(duì)各細(xì)節(jié)方法做說明,不熟悉的朋友請(qǐng)自行查閱相關(guān)資料。我們把整個(gè)代碼串起來:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
整個(gè)跑下來有個(gè)小問題,F(xiàn)X下,不需要form.submit(),直接把表單給提交出去了,所以這句也省掉了,原因知道的請(qǐng)回復(fù)。
這個(gè)demo在IE6/IE7/FX下測(cè)試通過。
類比一下,我用input.select()做了測(cè)試,卻能響應(yīng)select事件。這個(gè)原因先放一邊,我們看看先怎么把眼下的問題解決了。
不響應(yīng)事件的代碼示例:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
實(shí)際運(yùn)行,不會(huì)有alert出來。
雖然用submit方法來提交表單有違Unobtrustive Javascript的原則,但有時(shí)候不得不用,比如做搜索提示(auto-complete)選中Item之后就需要用JS來提交搜索表單。
二、問題分析
既然本身不響應(yīng)事件,那只有手工觸發(fā)這些事件了,確定手工觸發(fā)方案之前先回顧一下事件的注冊(cè)方式:
“原始”的注冊(cè)方式有兩種,看代碼示例:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
這樣的注冊(cè)事件,會(huì)給form增加了一個(gè)方法onsubmit。所以,可以通過直接執(zhí)行這個(gè)方法,等同于手工觸發(fā)了事件。
看代碼示例:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
這樣可以得到一個(gè)alert。
但是在如今“先進(jìn)”的DOM2標(biāo)準(zhǔn)注冊(cè)方式以及IE的注冊(cè)方式attachEvent已經(jīng)很常用。這些注冊(cè)方式,onsubmit方法是不存在的,如果使用form.onsubmit()會(huì)直接報(bào)錯(cuò)。
三、解決方案
當(dāng)然“先進(jìn)”的注冊(cè)方式本身也提供了手工觸發(fā)事件的解決方案,只是要針對(duì)DOM2標(biāo)準(zhǔn)和IE寫不同的程序,另外這個(gè)程序,對(duì)“原始”的注冊(cè)方式也一樣有效。請(qǐng)看代碼示例:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
四、代碼總結(jié)
這里不再對(duì)各細(xì)節(jié)方法做說明,不熟悉的朋友請(qǐng)自行查閱相關(guān)資料。我們把整個(gè)代碼串起來:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
整個(gè)跑下來有個(gè)小問題,F(xiàn)X下,不需要form.submit(),直接把表單給提交出去了,所以這句也省掉了,原因知道的請(qǐng)回復(fù)。
這個(gè)demo在IE6/IE7/FX下測(cè)試通過。
您可能感興趣的文章:
- 在一個(gè)form用一個(gè)SUBMIT(或button)分別提交到兩個(gè)處理表單頁面的代碼
- onsubmit阻止form表單提交與onclick的相關(guān)操作
- jquery中使用$(#form).submit()重寫提交表單無效原因分析及解決
- ajaxForm和ajaxSubmit 粘貼就可用示例代碼
- document.forms[].submit()使用介紹
- JS中的form.submit()不能提交表單的錯(cuò)誤原因
- form.submit()不能提交表單的錯(cuò)誤原因及解決方法
- form.submit()不能提交表單的原因分析
- chrome不支持form.submit的解決方案
相關(guān)文章
javaScript checkbox 全選/反選及批量刪除
javaScript checkbox 全選/反選及批量刪除實(shí)現(xiàn)代碼,需要的朋友可以參考下。2010-04-04Javascript 表單之間的數(shù)據(jù)傳遞代碼
今天有朋友問我關(guān)于用JAVASCRIPT來進(jìn)行頁面各表單之間的數(shù)據(jù)傳遞的問題,我以前也寫過,不過從來沒有注意,今天總結(jié)了一下,希望能夠給大家一些幫助,也幫助我總結(jié)以前學(xué)過,用過的知識(shí)。2008-12-12用JavaScript限制textarea輸入長度 (For: IE、Firefox ...)[
用JavaScript限制textarea輸入長度 (For: IE、Firefox ...)[...2006-12-12google 搜索框添加關(guān)鍵字實(shí)現(xiàn)代碼
一段創(chuàng)新的搜索腳本代碼來自tourbus的Bob Rankin提供了一段定制的JAVA代碼.2010-04-04