submit和button类型控制的表单提交
表单提交的时候，简单的有两种风格的提交方法，分别如下：
<input type="submit" value="submit" /> <input type="button" value="submit" onclick="check_form()"/>
这两种提交方式有不同，下面分别来说明。
当使用type=“submit”来作表单提交时，用到的js代码如下：
假设一个简单的表单格式如下：
<form action="login" method="post" id="login" onsubmit="return check_form()"> <table> <tr> <th width="20%">UserName</th> <td width="70%"> <input type="text" name="uname" id="uname" /> </td> </tr> <tr></tr> <tr> <th width="20%">Password</th> <td width="70%"> <input type="password" name="passwd" id="passwd" /> </td> </tr> <tr> <td colspan="2" align="center"> <br /> <input type="hidden" name="action" value="login" /> <input type="submit" value="Login" /> </td> </tr> </table> </form>
注意其中的：
onsubmit="return check_form()"是用来做表单格式验证的js代码，具体如下：
function check_form() {
var userName = document.getElementById("uname");
var password = document.getElementById("passwd");
if (userName.value == "" || userName.value == null) {
alert("用户名不能为空！");
return false;
}
else if (password.value == "" || password.value == null) {
alert("用户密码不能为空！");
return false;
}
else{
return true;
}
}
此时的js代码中只需要做格式验证，不需要做submit的处理。
在这种提交方式中，需要注意的是要在form的onsubmit中调用校验方法：
<form action="login" method="post" id="login" onsubmit="return check_form()">
同时采用type为submit的提交方式
<input type="submit" value="Login" />
当使用type=”button“来作表单提交时，用到的js代码如下：
此时的表单格式为：
<form action="login" method="post" id="login" > <table> <tr> <th width="20%">UserName</th> <td width="70%"> <input type="text" name="uname" id="uname" /> </td> </tr> <tr></tr> <tr> <th width="20%">Password</th> <td width="70%"> <input type="password" name="passwd" id="passwd" /> </td> </tr> <tr> <td colspan="2" align="center"> <br /> <input type="hidden" name="action" value="login" /> <input type="button" value="Login" onclick="check_form()"/> </td> </tr> </table> </form>
function check_form() {
var userName = document.getElementById("uname");
var password = document.getElementById("passwd");
if (userName.value == "" || userName.value == null) {
alert("用户名不能为空！");
return false;
}
else if (password.value == "" || password.value == null) {
alert("用户密码不能为空！");
return false;
}
document.getElementById("login").submit();
}
此时的check_form方法不仅仅要实现格式校验的功能，还要实现form的submit功能。
这里需要注意的几点是：
首先要给form一个id号：<form action="login" method="post" id="login" >
其次要在点击button的时候调用check_form方法：<input type="button" value="Login" onclick="check_form()"/>
最后，要注意在check_form方法的格式校验完成之后进行form的submit处理：document.getElementById("login").submit();