網(wǎng)頁表單提交方式詳細(xì)匯總

1、網(wǎng)頁表單提交方式詳細(xì)匯總用戶提交按鈕或圖像按鈕時，就會提交表單。 使用 input或 button 都可以定義提交按鈕，只要將其特性的值設(shè)置為submit 即可，而圖像按鈕則是通過input 的 type 特性值設(shè)置為 image 來定義的大家先來看看表單提交的幾種方式：1、2、提交3、說明：用戶提交按鈕或圖像按鈕時，就會提交表單。使用或都可以定義提交按鈕，只要將其特性的值設(shè)置為“submit”即可，而圖像按鈕則是通過的type 特性值設(shè)置為”image”來定義的。因此，只要我們單擊一下代碼生成的按鈕，就可以提交表單。4、阻止表單提交只要在表單中存在上面列出的任何一種按鈕，那么相應(yīng)表單控件擁有

2、焦點的情況下，按回車鍵就可以提交表單。如果表單里沒有提交按鈕，按回車鍵不會提交表單。以這種方式提交表單時，瀏覽器會在將請求發(fā)送給服務(wù)器之前觸發(fā) submit 事件。這樣，我們就有機會驗證表單數(shù)據(jù)，并據(jù)以決定是否允許表單提交。阻止這個事件的默認(rèn)行為就可以取消表單提交。例如，下面代碼會阻止表單提交：復(fù)制代碼代碼如下 :var EventUtil = addHandler: function (element, type, handler) if (element.addEventListener) element.addEventListener(type, handler, false); el

3、se if (element.attachEvent) element.attachEvent("on" + type, handler); else element"on" + type = handler;,getEvent: function (event) return event ? event : window.event;,preventDefault: function (event) if (event.preventDefault) event.preventDefault(); else event.returnValue = fa

4、lse; ；var form = document.getElementById("myForm");EventUtil.addHandler(form, "submit", function () /取得事件對象event = EventUtil.getEvent(event);/阻止默認(rèn)事件EventUtil.preventDefault(event););調(diào)用 preventDefault() 方法阻止了表單提交。一般來說，在表單數(shù)據(jù)無效而不能發(fā)送給服務(wù)器時，可以使用這一技術(shù)。5、在 JavaScript 中，以編程方式調(diào)用submit() 方法也

5、可以提交表單。這種方式無需表單包含提交按鈕，任何時候都可以正常提交表單。來看一個例子：var form = document.getElementById("myForm");/提交表單form.submit();在以調(diào)用 submit() 方法的形式提交表單時，不會觸發(fā)submit事件，因此要記得在調(diào)用此方法之前先驗證表單數(shù)字據(jù)。提交表單時可能出現(xiàn)的最大問題，就是重復(fù)提交表單。在第一次提交表單后，如果長時間沒有反映，用戶可能會變得不耐煩。這時候，他們也許會反復(fù)單擊提交按鈕。結(jié)果往往很麻煩（因為服務(wù)器要處理重復(fù)請求），或者造成錯誤（如果是下了訂單，那么可能會多定好幾份）。解

6、決這一問題的辦法有兩個：在第一次提交表單后就禁用提交按鈕；利用 onsubmit 事件處理程序取消后續(xù)的表單提交操作。接下來將詳細(xì)介紹通過form 提交的幾種方法方法一：利用 form 的 onsubmit() 函數(shù)（經(jīng)常使用） ，代碼如下： 復(fù)制代碼代碼如下 :function validateForm()if(document.reply.title.value = "") / 通過 form 名來獲取 form alert("please input the title!");document.reply.title.focus();return

7、false;if(document.forms0.cont.value = "") / 通過 forms 數(shù)組獲取 formalert("please input the content!");document.reply.cont.focus();return false;return true;注意：1.onsubmit 屬性內(nèi)容一定要有return 關(guān)鍵字，否則函數(shù)會直接執(zhí)行，不會返回2.validateForm 一定要返回一個boolean 類型的返回值3.提交按鈕要寫成 submit 類型的 方法二：利用 input 類型為 submit 組件

8、的 onclick() 函數(shù)將上面 form 標(biāo)簽中的 onsubmit="return validateForm()" 屬性，去掉。為“提交”按鈕添加onclick 事件，如下：方法三：利用 button 組件的 onclick() 函數(shù)，手動提交，代碼如下： 復(fù)制代碼代碼如下 :function modifyItem() if (trim(document.getElementById("itemName").value) = "") alert(" 物料名稱不能為空！");document.getElemen

9、tById("itemName").focus();return;with (document.getElementById("itemForm") method = "post"action ="item.do?command=modify&pageNo=$itemForm.pageNo"submit();/返回function goBack() window.self.location ="item.do?command=list&pageNo=$itemForm.pageNo"注意：1.提交時，設(shè)置form 的 action 和 methods 屬性，然后利用fo