大家先來看看表單提交的幾種方式： 1、<!--通用提交按鈕--> <input type="submit" value="提交"> 2、<!--自定義提交按鈕--> <button type="Submit">提交</button> 3、<!--圖像按鈕--> <input type="image" ...
大家先來看看表單提交的幾種方式：
1、<!--通用提交按鈕-->
<input type="submit" value="提交">
2、<!--自定義提交按鈕-->
<button type="Submit">提交</button>
3、<!--圖像按鈕-->
<input type="image" src = "btn.png">
說明：用戶提交按鈕或圖像按鈕時，就會提交表單。使用<input>或<button>都可以定義提交按鈕，只要將其特性的值設置為“submit”即可，而圖像按鈕則是通過<input>的type特性值設置為”image”來定義的。因此，只要我們單擊一下代碼生成的按鈕，就可以提交表單。
4、阻止表單提交
只要在表單中存在上面列出的任何一種按鈕，那麼相應表單控制項擁有焦點的情況下，按回車鍵就可以提交表單。如果表單里沒有提交按鈕，按回車鍵不會提交表單。
以這種方式提交表單時，瀏覽器會在將請求發送給伺服器之前觸發submit事件。這樣，我們就有機會驗證表單數據，並據以決定是否允許表單提交。阻止這個事件的預設行為就可以取消表單提交。例如，下麵代碼會阻止表單提交：
1 var EventUtil = { 2 addHandler: function (element, type, handler) { 3 if (element.addEventListener) { 4 element.addEventListener(type, handler, false); 5 } else if (element.attachEvent) { 6 element.attachEvent("on" + type, handler); 7 } else { 8 element["on" + type] = handler; 9 } 10 }, 11 getEvent: function (event) { 12 return event ? event : window.event; 13 }, 14 preventDefault: function (event) { 15 if (event.preventDefault) { 16 event.preventDefault(); 17 } else { 18 event.returnValue = false; 19 } 20 } 21 22 }； 23 24 var form = document.getElementById("myForm"); 25 EventUtil.addHandler(form, "submit", function () { 26 //取得事件對象 27 event = EventUtil.getEvent(event); 28 //阻止預設事件 29 EventUtil.preventDefault(event); 30 });
調用preventDefault()方法阻止了表單提交。一般來說，在表單數據無效而不能發送給伺服器時，可以使用這一技術。
5、在JavaScript中，以編程方式調用submit()方法也可以提交表單。
這種方式無需表單包含提交按鈕，任何時候都可以正常提交表單。來看一個例子：
var form = document.getElementById("myForm");
//提交表單
form.submit();
在以調用submit()方法的形式提交表單時，不會觸發submit事件，因此要記得在調用此方法之前先驗證表單數字據。
提交表單時可能出現的最大問題，就是重覆提交表單。在第一次提交表單後，如果長時間沒有反映，用戶可能會變得不耐煩。這時候，他們也許會反覆單擊提交按鈕。結果往往很麻煩（因為伺服器要處理重覆請求），或者造成錯誤（如果是下了訂單，那麼可能會多定好幾份）。
解決這一問題的辦法有兩個：
在第一次提交表單後就禁用提交按鈕；
利用onsubmit事件處理程式取消後續的表單提交操作。
接下來將詳細介紹通過form提交的幾種方法
方法一：利用form的onsubmit()函數（經常使用），代碼如下：
1 1.<script type="text/javascript"> 2 2. function validateForm(){ 3 3. if(document.reply.title.value == ""){ //通過form名來獲取form 4 4. alert("please input the title!"); 5 5. document.reply.title.focus(); 6 6. return false; 7 7. } 8 8. if(document.forms[0].cont.value == ""){ //通過forms數組獲取form 9 9. alert("please input the content!"); 10 10. document.reply.cont.focus(); 11 11. return false; 12 12. } 13 13. return true; 14 14. } 15 15.<form name="reply" method="post" onsubmit="return validateForm( );"> 16 16. <input type="text" name="title" size="80" /><br /> 17 17. <textarea name="cont" cols="80" rows="12"></textarea><br /> 18 18. <input type="submit" value="提交" > 19 19.</form> 20 20.註意： 21 21.1.onsubmit屬性內容一定要有return關鍵字，否則函數會直接執行，不會返回 22 22.2.validateForm一定要返回一個boolean類型的返回值 23 23.3.提交按鈕要寫成submit類型的
方法二：利用input類型為submit組件的onclick()函數
1.將上面form標簽中的onsubmit="return validateForm()"屬性，去掉。
2.為“提交”按鈕添加onclick事件，如下：
<input type="submit" value="提交" onclick="return validateForm();">
方法三：利用button組件的onclick()函數，手動提交，代碼如下：
1 1.<script type="text/javascript"> 2 2. function modifyItem() { 3 3. if (trim(document.getElementById("itemName").value) == "") { 4 4. alert("物料名稱不能為空！"); 5 5. document.getElementById("itemName").focus(); 6 6. return; 7 7. } 8 8. with (document.getElementById("itemForm")) { 9 9. method = "post"; 10 10. action = "item.do?command=modify&pageNo=${itemForm.pageNo}"; 11 11. submit(); 12 12. } 13 13. } 14 14. //返回 15 15. function goBack() { 16 16. window.self.location = "item.do?command=list&pageNo=${itemForm.pageNo}"; 17 17. } 18 18.</script> 19 19.<form name="itemForm" id="itemForm"> 20 20. <input name="itemNo" type="text" id="itemNo" value="${ item.itemNo }" > 21 21. <input name="itemName" type="text" id="itemName" value="${ item.itemName }" > 22 22. <input name="btnModify" type="button" id="btnModify" value=“修改" onclick="modifyItem()"> 23 23.</form> 24 24.註意： 25 25.1.提交時，設置form的action和methods屬性，然後利用form.submit()函數提交。
菜鳥小結：
1.對form中的組件驗證時，前兩個使用的是name屬性，包括form自身的。
2.如果提交表單時沒有反應，同時確定提交表單部分代碼沒有問題，請查看提交表單前面的js代碼，有時前面js的錯誤會引發莫名其妙的問題。
