1. 程式人生 > >form submit提交的幾種方法

form submit提交的幾種方法

最近研究了下html中,form保單提交的幾種方法,現與大家分享一下(注:網上可能已經有好多版本了,這裡自己寫下來做個總結了,哈!):

方法一:利用form的onsubmit()函式(經常使用)

Html程式碼  收藏程式碼
  1. <script type="text/javascript">  
  2.     function validateForm(){  
  3.     if(document.reply.title.value == ""){ //通過form名來獲取form  
  4.         alert("please input the title!");  
  5.         document.reply.title.focus();  
  6.         return false;  
  7.     }     
  8.     if(document.forms[0].cont.value == ""){ //通過forms陣列獲取form  
  9.         alert("please input the content!");  
  10.         document.reply.cont.focus();  
  11.         return false;  
  12.     }  
  13.     return true;  
  14.   }  
  15. <form name="reply"  method="post" onsubmit="return validateForm( );"
    >  
  16.         <input type="text" name="title"  size="80" /><br />  
  17.         <textarea name="cont" cols="80" rows="12"></textarea><br />  
  18.         <input type="submit" value="提交" >  
  19. </form>  
  20. 注意:  
  21. 1.onsubmit屬性內容一定要有return關鍵字,否則函式會直接執行,不會返回  
  22. 2.validateForm一定要返回一個boolean型別的返回值  
  23. 3.提交按鈕要寫成submit型別的  

方法二:利用input型別為submit元件的onclick()函式

    1.將上面form標籤中的onsubmit="return validateForm()"屬性,去掉。

    2.為“提交”按鈕新增onclick事件,如下:

     <input type="submit" value="提交" onclick="return validateForm();">

方法三:利用button元件的onclick()函式,手動提交

Html程式碼  收藏程式碼
  1. <script type="text/javascript">  
  2.     function modifyItem() {  
  3.         if (trim(document.getElementById("itemName").value) == "") {  
  4.             alert("物料名稱不能為空!");  
  5.             document.getElementById("itemName").focus();  
  6.             return;  
  7.         }   
  8.         with (document.getElementById("itemForm")) {  
  9.             method = "post";  
  10.             action = "item.do?command=modify&pageNo=${itemForm.pageNo}";  
  11.             submit();  
  12.         }  
  13.     }  
  14.     //返回  
  15.     function goBack() {  
  16.         window.self.location = "item.do?command=list&pageNo=${itemForm.pageNo}";  
  17.     }  
  18. </script>  
  19. <form name="itemForm" id="itemForm">  
  20.       <input name="itemNo" type="text"   id="itemNo" value="${ item.itemNo }" >  
  21.       <input name="itemName" type="text"   id="itemName" value="${ item.itemName }" >  
  22.      <input name="btnModify"  type="button" id="btnModify" value=“修改" onclick="modifyItem()">  
  23. </form>  
  24. 注意:  
  25. 1.提交時,設定form的action和methods屬性,然後利用form.submit()函式提交。  

 總結:

       1.對form中的元件驗證時,前兩個使用的是name屬性,包括form自身的。

       2.如果提交表單時沒有反應,同時確定提交表單部分程式碼沒有問題,請檢視提交表單前面的js程式碼,有時前面js的錯誤會引發莫名其妙的問題。

相關推薦

form submit提交方法

最近研究了下html中,form保單提交的幾種方法,現與大家分享一下(注:網上可能已經有好多版本了,這裡自己寫下來做個總結了,哈!): 方法一:利用form的onsubmit()函式(經常使用) Html程式碼   <script type="text/

form表單提交方法

form表單提交 net ces lang vax ofo success regex The form表單提交的幾種方法 <form id="myform" name="myform" method="post" onsubmit="return sumbit

利用JS提交表單的方法和驗證(必看篇)

www contain 功能 ner ble 四種 利用 comm pac 第一種方式:表單提交,在form標簽中增加onsubmit事件來判斷表單提交是否成功 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

html向後端提交數據的方法

客戶 內容 form表單 orm 實現 不用 完整 RM 表單提交 (未寫完) 一 . 刷新頁面   1. form表單提交     GET/POST 二. 局部刷新(不刷新頁面)   1. Ajax 狀態碼: 0 - (未初始化)還沒有調用send()方法 1 - (載入

防止訂單重複提交方法

第一種辦法: var flag = false;// 在提交函式外面定義個變數防止重複提交   //提交函式 function sublimit() {     if(flag){      

防止表單重複提交方法總結

版權宣告:本文為博主原創文章,未經博主允許不得轉載。 https://blog.csdn.net/Warpar/article/details/72917924 1、JavaScript防止表單重複提交(主要用於網路延遲情況下使用者點選多次submit按鈕導致表單重複提

jsp的form表單提交方式

1.form表單submit直接提交資料 <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/j

html表單提交方法

最普通最常用最一般的方法就是用submit type..看程式碼: <form name=”form” method=”post” action=”#">     <input type=”submit” name=”submit” value

form表單上傳附件的方法

問題描述:在網頁開發過程中,當需要上傳附件(圖片,音訊,視訊等)時,常規方法是使用form表單進行提交,這裡總結一下form表單提交的幾種方法。 1.使用form表單進行提交 <form name="form名稱" action="請求地址"

線程同步的方法

並且 word 進行 void 等待 輸出結果 每次 wait 無法訪問 用什麽關鍵字修飾同步方法 ? 用synchronized關鍵字修飾同步方法 同步有幾種實現方法,都是什麽?分別是synchronized,wait與notify wait():使一個線程處於等待狀

SQL Server遍歷表的方法

都是 遍歷 lec delet -s rop itl 想要 temp  在數據庫開發過程中,我們經常會碰到要遍歷數據表的情形,一提到遍歷表,我們第一印象可能就想到使用遊標,使用遊標雖然直觀易懂,但是它不符合面向集合操作的原則,而且性能也比面向集合低。當然,從面向集合操作的角

Html中嵌套其他HTML文件的方法(轉)

java mar net rip gin bsp ace wid style 給大家整理了3個方法,一個是HTML的iframe標簽,別兩個是JS引用。比如要在arr.html文件裏引用index.html文件,方法如下。 HTML引用方法: <iframe na

將HTML5封裝成android應用APK文件的方法

android作為下一代的網頁語言,HTML5擁有很多讓人期待已久的新特性。HTML5的優勢之一在於能夠實現跨平臺遊戲編碼移植,現在已經有很多公司在移動 設備上使用HTML5技術。隨著HTML5跨平臺支持的不斷增強和智能手機的迅速普,HTML5技術有著非常好的發展前景,甚至有人預言HTML5將引燃 移動平臺遊

C#多線程的方法

task start invoke 數組 erl method 並行計算 bsp nbsp 1、Theard2、TheardPool 線程池3、Task 在Theard上做了優化和改進,建議使用 .start();4、Task.Factory.Start(method)

Java中創建數組的方法

java false 三種 數組下標 [1] [] 判斷 color str Java中創建數組的幾種方法 public static void main(String[] args) { //創建數組的第一種方法 int[] arr=new int[6]; int

克隆對象的方法

克隆 type sharp class 以及 each pcl 反射 tor   克隆對象在開發過程中經常會遇到,有些時候需要淺克隆,有些時候需要深克隆,具體它們之間有什麽區別,以及實現方式有哪些,在這裏總結一下。   實現深克隆有以下幾種方法。 手動 代碼如下:

windows系統字體安裝使用的方法

windows ps 字體簡易安裝方法:1、打開系統盤的 windows 下的 fonts 文件夾;2、用另一個窗口打開字體存放的文件夾;3、在存放字體的文件夾中選擇要安裝的字體(部分選或全選均可);4、用鼠標右鍵將所選字體拖到windows 下的 fonts 文件夾上,松開鼠標,在彈出的提示框上選擇

liunx下獲取網卡地址的方法

liunx下獲取網卡地址的幾種方法CentOS Linux release 7.2.1511 (Core)系統獲取網卡ipifconfig em1|awk ‘NR==2 {print $2}‘ifconfig em1|sed -n ‘2p‘|cut -d ‘ ‘ -f 10ifconfig em1|sed -

(轉)Unity3D中移動物體位置的方法

多種方式 移動 2.4 包括 簡介 調用 在外 blank targe 1. 簡介 在unity3d中,有多種方式可以改變物體的坐標,實現移動的目的,其本質是每幀修改物體的position。 2. 通過Transform組件移動物體 Transform 組件

spring mvc獲取絕對路徑的方法

col 文件 結果 ret 項目 tps span ppr etc 1.首先如果是在一個controller方法中,則很簡單,直接用下面語句。 1 @RequestMapping("categoryHome") 2 public ModelAndVie