在處理表單提交的時候遇到一個問題，通常用<input type="submit" value="提交" />按鈕來提交form，再監聽form的onsubmit事件就能在前端處理表單驗證的事情。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <form id="form" action="http://www.a.com" method="post"> <input type="submit" value="提交" /> </form> <script> var form =document.getElementById("form"); form.onsubmit = function(){ alert("表單提交了") } </script> </body> </html>
以上代碼很順利，沒有任何問題。
當用別的元素來觸發form的提交時確不會觸發onsubmit事件。代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <form id="form" action="http://www.a.com" method="post"> <input type="submit" value="提交" /> </form> <a href="javascript:void(0)" id="txtBtn">提交</a> <script> var form =document.getElementById("form"), txtBtn = document.getElementById("txtBtn"); txtBtn.onclick = function(){ form.submit(); } form.onsubmit = function(){ alert("表單提交了") } </script> </body> </html>
當點擊a鏈接的提交時以為會彈出：表單提交了，可是沒有，但表單內容是提交了的，但沒有觸發onsubmit事件。查了下手冊，原文如下：
The submit method does not invoke the onsubmit event handler. Call the onsubmit event handler directly. When using Microsoft® Internet Explorer 5.5 and later, you can call the fireEvent method with a value of onsubmit in the sEvent parameter.
關於fireEvent的介紹，可以看這里：http://msdn.microsoft.com/en-us/library/ms536423(v=vs.85).aspx
於是加上fireEvent。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <form id="form" action="http://www.a.com" method="post"> <input type="submit" value="提交" /> </form> <a href="javascript:void(0)" id="txtBtn">提交</a> <script> var form =document.getElementById("form"), txtBtn = document.getElementById("txtBtn"); txtBtn.onclick = function(){ form.fireEvent('onsubmit'); form.submit(); } form.onsubmit = function(){ alert("表單提交了") } </script> </body> </html>
以上代碼如願的彈出：表單提交了，用a標簽提交也能觸發onsubmit事件了。
到此為止以為OK了，可是在chrome和firefox下依然不行。百度GOOGLE一翻，找到了解決方法，直接上代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <form id="form" action="http://www.a.com" method="post"> <input type="submit" value="提交" /> </form> <a href="javascript:void(0)" id="txtBtn">提交</a> <script> var form =document.getElementById("form"), txtBtn = document.getElementById("txtBtn"); txtBtn.onclick = function(){ var result; if(form.fireEvent){ //IE瀏覽器 result=form.fireEvent('onsubmit'); }else{ //FIREFOX\CHROME等標准瀏覽器 var evt = document.createEvent('HTMLEvents'); evt.initEvent('submit',false,true); result=form.dispatchEvent(evt); } if(result){ form.submit(); } } form.onsubmit = function(){ alert("表單提交了") } </script> </body> </html>
完美解決問題，各瀏覽器下表現一致了！
關於firefox,chrome等標准瀏覽器的實現中所用到的方法，具體描述看下面幾個鏈接：
http://www.w3school.com.cn/xmldom/met_document_createevent.asp
http://www.w3school.com.cn/xmldom/met_element_dispatchevent.asp
http://www.w3school.com.cn/jsref/event_initevent.asp