HTML form表单提交方法案例详解
时间：2022-05-10 10:14:44|栏目：JavaScript代码|点击： 次
form表单提交方式总结一下：
一、利用submit按钮实现提交，当点击submit按钮时，触发onclick事件，由JavaScript里函数判断输入内容是否为空，如果为空，返回false, 不提交，如果不为空，提交到由action指定的地址。
<script type="text/javascript">
function check(form) {
if(form.userId.value=='') {
alert("请输入用户帐号!");
form.userId.focus();
return false;
}
if(form.password.value==''){
alert("请输入登录密码!");
form.password.focus();
return false;
}
return true;
}
</script>
<form action="login.do?act=login" method="post">
用户帐号<input type=text name="userId" size="18" value="" ><br>
登录密码<input type="password" name="password" size="19" value=""/>
<input type=submit name="submit1" value="登陆" onclick="return check(this.form)">
</form>
二、利用button按钮实现提交，当点击button按钮时，触发onclick事件，由JavaScript里函数判断输入内容是否为空，如果为空，返回false, 不提交，如果不为空，提交到由action指定的地址，由于button按钮不具备自动提交的功能，所以由JavaScript实现提交。
<script type="text/javascript">
function check(form) {
if(form.userId.value=='') {
alert("请输入用户帐号!");
form.userId.focus();
return false;
}
if(form.password.value==''){
alert("请输入登录密码!");
form.password.focus();
return false;
}
document.myform.submit();
}
</script>
<form action="login.do?act=login" name="myform" method="post">
用户帐号<input type=text name="userId" size="18" value="" ><br>
登录密码<input type="password" name="password" size="19" value=""/>
<input type=button name="submit1" value="登陆" onclick="check(this.form)">
</form>
三、利用submit按钮实现提交，当点击submit按钮时，先触发onsubmit事件，由JavaScript里函数判断输入内容是否为空，如果为空，返回false, 不提交，如果不为空，提交到由action指定的地址。
<script type="text/javascript">
function check(form) {
if(form.userId.value=='') {
alert("请输入用户帐号!");
form.userId.focus();
return false;
}
if(form.password.value==''){
alert("请输入登录密码!");
form.password.focus();
return false;
}
return true;
}
</script>
<form action="login.do?act=login" method="post" onsubmit="return check(this)">
用户帐号<input type=text name="userId" size="18" value="" ><br>
登录密码<input type="password" name="password" size="19" value=""/>
<input type=submit name="submit1" value="登陆">
</form>
以上就是form表单常用的三种提交方式，有不明白的地方，欢迎qq交流：317856821
上一篇：layui导出所有数据的例子
栏 目：JavaScript代码
下一篇：React 使用browserHistory项目访问404问题解决
本文标题：HTML form表单提交方法案例详解
本文地址：http://www.codeinn.net/misctech/201554.html
