1. 程式人生 > >button跟submit的區別及使用js實現頁面跳轉的方式

button跟submit的區別及使用js實現頁面跳轉的方式

button和submit的區別及使用js實現頁面跳轉的方式:

原文:  http://blog.csdn.net/luosisan/article/details/17385657

  1. type=button      //就單純是按鈕功能   
  2. type=submit      //是傳送表單


但是對於從事WEB UI的人應該要注意到,使用submit來提高頁面易用性:
使用submit後,頁面支援鍵盤enter鍵操作,而很多WEB軟體設計師,可能沒有注意到submit統
一。

用button後往往頁面不支援enter鍵了。所以需要支援enter鍵,必須要設定個submit,預設enter鍵對頁面第一個submit進行操作。


  1. <input type="submit" name="b1" value="提交" onClick="bt_submit_onclick()">  

執行完onClick,轉到action。可以自動提交不需要onClick。所以說onclick這裡可以不要。

  1. <input type="button" name="b1" value="提交" onClick="bt_submit_onclick()">  

執行完onClick,跳轉檔案在js檔案裡控制。提交需要onClick。

比如:
1、
  1. onclick="form1.action='a.jsp';form1.submit();"

這樣就實現了submit的功能了。

2、
  1. <form name="form1" method="post" action="http://www.sina.com.cn">     
  2.     <input  type="button"  name="Button"  value="Button"  onClick="submit()">     
  3.  </form>  


3、
  1. <input type="button" name="Button" value="Button"    onClick="javascript:windows.location.href="
    你的url"">  


js實現頁面跳轉的幾種方式:

第一種:
  1. <script language="javascript" type="text/javascript">  
  2.   function   test(){   
  3.      window.location.href="login.jsp?backurl="+window.location.href;   
  4.    }  
  5. </script>  


第二種:
  1. <script language="javascript">  
  2.   function   test(){   
  3.      alert("返回");  
  4.      window.history.back(-1);  
  5.   }  
  6. </script>  


第三種:
  1. <script language="javascript">  
  2. window.navigate("top.jsp");  
  3. </script>  


第四種:
  1. <script language="JavaScript">  
  2.    function   test(){   
  3.      self.location='top.htm';  
  4.     }  
  5. </script>  


第五種:
  1. <script language="javascript">  
  2.   function   test(){   
  3.      alert("非法訪問!");  
  4.      top.location='xx.jsp';  
  5.    }  
  6. </script>