|
用戶提交按鈕或圖像按鈕時，就會提交表單。使用input或button都可以定義提交按鈕，只要將其特性的值設置為submit即可，而圖像按鈕則是通過input的type特性值設置為image來定義的
大家先來看看表單提交的幾種方式： 復制代碼 代碼如下:var EventUtil = { addHandler: function (element, type, handler) { if (element.addEventListener) { element.addEventListener(type, handler, false); } else 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 = false; } } }； var form = document.getElementById("myForm"); EventUtil.addHandler(form, "submit", function () { //取得事件對象 event = EventUtil.getEvent(event); //阻止默認事件 EventUtil.preventDefault(event); }); 調(diào)用preventDefault()方法阻止了表單提交。一般來說，在表單數(shù)據(jù)無效而不能發(fā)送給服務器時，可以使用這一技術(shù)。 5、在JavaScript中，以編程方式調(diào)用submit()方法也可以提交表單。 這種方式無需表單包含提交按鈕，任何時候都可以正常提交表單。來看一個例子： var form = document.getElementById("myForm"); //提交表單 form.submit(); 在以調(diào)用submit()方法的形式提交表單時，不會觸發(fā)submit事件，因此要記得在調(diào)用此方法之前先驗證表單數(shù)字據(jù)。 提交表單時可能出現(xiàn)的最大問題，就是重復提交表單。在第一次提交表單后，如果長時間沒有反映，用戶可能會變得不耐煩。這時候，他們也許會反復單擊提交按鈕。結(jié)果往往很麻煩（因為服務器要處理重復請求），或者造成錯誤（如果是下了訂單，那么可能會多定好幾份）。 解決這一問題的辦法有兩個： 在第一次提交表單后就禁用提交按鈕； 利用onsubmit事件處理程序取消后續(xù)的表單提交操作。 接下來將詳細介紹通過form提交的幾種方法 方法一：利用form的onsubmit()函數(shù)（經(jīng)常使用），代碼如下： 復制代碼 代碼如下:<script type="text/javascript"> function validateForm(){ if(document.reply.title.value == ""){ //通過form名來獲取form alert("please input the title!"); document.reply.title.focus(); return false; } if(document.forms[0].cont.value == ""){ //通過forms數(shù)組獲取form alert("please input the content!"); document.reply.cont.focus(); return false; } return true; } <form name="reply" method="post" onsubmit="return validateForm( );"> <input type="text" name="title" size="80" /> <textarea name="cont" cols="80" rows="12"></textarea> <input type="submit" value="提交" > </form> 注意： 1.onsubmit屬性內(nèi)容一定要有return關(guān)鍵字，否則函數(shù)會直接執(zhí)行，不會返回 2.validateForm一定要返回一個boolean類型的返回值 3.提交按鈕要寫成submit類型的 方法二：利用input類型為submit組件的onclick()函數(shù) 將上面form標簽中的onsubmit="return validateForm()"屬性，去掉。 為“提交”按鈕添加onclick事件，如下： <input type="submit" value="提交" onclick="return validateForm();"> 方法三：利用button組件的onclick()函數(shù)，手動提交，代碼如下： 復制代碼 代碼如下:<script type="text/javascript"> function modifyItem() { if (trim(document.getElementById("itemName").value) == "") { alert("物料名稱不能為空！"); document.getElementById("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}"; } </script> <form name="itemForm" id="itemForm"> <input name="itemNo" type="text" id="itemNo" value="${ item.itemNo }" > <input name="itemName" type="text" id="itemName" value="${ item.itemName }" > <input name="btnModify" type="button" id="btnModify" value=“修改" onclick="modifyItem()"> </form> 注意： 1.提交時，設置form的action和methods屬性，然后利用form.submit()函數(shù)提交。 以上代碼具體實現(xiàn)可以參考如下： http://www./zhshlist.aspx http://www./huixiaolist.aspx http://www./daililist.aspx 菜鳥小結(jié)： 對form中的組件驗證時，前兩個使用的是name屬性，包括form自身的。 如果提交表單時沒有反應，同時確定提交表單部分代碼沒有問題，請查看提交表單前面的js代碼，有時前面js的錯誤會引發(fā)莫名其妙的問題。 |
|
|
