javascript中form提交时需要注意的问题

      在javascript中如果要对form进行提交,要注意如下几个问题:

      1.button和submit之间的区别。在form中button表示的是一个按钮,如果不写onclick事件则单击按钮时不会提交表单。代码如下:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" >
 3 <head>
 4     <title>无标题页</title>
 5 </head>
 6 <body>
 7 <form action="ok.aspx">
 8  <input type="text" />
 9  <input type="button" value="我要提交"/>
10 </form>
11 </body>
12 </html>

此时将表单将不会被提交。但是当使用submit时将会自动提交。代码如下:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" >
 3 <head>
 4     <title>无标题页</title>
 5 </head>

 6 <body>
 7 <form action="ok.aspx">
 8  <input type="text" />
 9  <input type="submit" value="我要提交"/>
10 </form>
11 </body>
12 </html>

注意:如果要使单击button按钮提交按钮,可在button中写入onclick事件进行提交。
      2.实现autopost。autopost实际上是当其他操作已经完成,但是不单击submit按钮,form也会自动提交。代码如下:

 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" >
 3 <head>
 4     <title>无标题页</title>
 5 </head>
 6 <body>
 7 <form id="form1" action="ok.aspx" >
 8  <select onchange="document.getElementById('form1').submit()">
 9   <option>北京</option>
10   <option>南京</option>
11   <option>天津</option>
12  </select>
13  
14 </form>
15 </body>
16 </html>

此例子是运用的下拉列表框,当下拉列表框中的值发生改变时调用了form中的submit方法。

     3.submit和onsubmit的区别。当使用button代替了submit按钮时,在button事件中写入了onclick事件并调用submit()方法。需要注意的是,此时将会直接提交表单而不会触发onsubmit事件。onsubmit就相当于是form中的一个方法名,其值就是一个方法体,比如:如果要阻止表单的提交可直接在使用<form onsubmit="retrun false"></form>。

 

 

posted @ 2012-05-30 01:15  孙进  阅读(2783)  评论(0编辑  收藏  举报