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>。