前端开发者前端开发工作流程 淘宝前端开发工作总结 前端开发工作内容描述
遇见个坑，一个ajax请求，表单被提交两次。
我在提交表单前，自己定义了一个函数。函数中有请求，页面不会跳转。
结果，在我点击提交表单按钮时，先执行了函数。然后页面跳转了。
原因： 我写的表单提交，使用<button value=”提交”>提交</button>。默认，button的type是submit。所以，在执行完click自定义函数后，自己又跳转了。
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>测试表单自动提交</title>
<style type=”text/css”>
button {
padding: 5px 10px;
}
input[type=’image’] {
width: 36px;
height: 30px;
line-height: 30px;
vertical-align: middle;
}
</style>
</head>
<body>
<p>1、只有一个输入框，回车就会提交跳转。</p>
<form action=”http://baidu.com” method=”post” name=”form-1″ id=”form-1″>
<input type=”text” name=”name”>
<input type=”hidden” name=”state”>
</form>
<p>2、有一个button，不为其指定type类型，其中button默认type类型是submit.点击提交，会跳转。</p>
<form action=”http://baidu.com” method=”post” name=”form-2″ id=”form-2″>
<input type=”text” name=”name”>
<button value=”submit”>提交</button>
</form>
<p>3、有一个button,设置其type为button.点击提交,不会跳转。</p>
<form action=”http://baidu.com” method=”post” name=”form-3″ id=”form-3″>
<input type=”text” name=”name”>
<button value=”button” type=”button”>提交</button>
</form>
<p>4、有一个type为image的情况.点击提交，会跳转。</p>
<form action=”http://baidu.com” method=”post” name=”form-4″ id=”form-4″>
<input type=”text” name=”name”>
<input type=”image” name=”name” value=”提交”>
</form>
<p>5、有一个type为button的情况.点击提交，不会跳转。</p>
<form action=”http://baidu.com” method=”post” name=”form-5″ id=”form-5″>
<input type=”text” name=”name”>
<input type=”button” name=”name” value=”提交”>
</form>
<p>6、执行函数</p>
<p>会先执行函数，再提交表单</p>
<form action=”http://baidu.com” method=”post” name=”form-6″ id=”form-6″>
<input type=”text” name=”name”>
<button value=”submit” type=”button” onclick=”Login()”>提交</button>
</form>
</body>
<script type=”text/javascript”>
function Login() {
alert(“hehe”);
}
</script>
</html>
总结：
<input>或<a> type为“submit”、“image”,表单会自动提交。
<button>的type 为默认、“submit”，表单会自动提交。
当在提交表单的按钮上进行绑定click事件后，自动提交表单前，会执行函数。
简单的验证表单，直接提交。后台的操作是通过获取表单中元素的name值，进行请求的处理的。
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Document</title>
<style type=”text/css”>
input,
button {
margin: 10px 0;
display: block;
}
</style>
</head>
<body>
<form method=”get” name=”form-1″ id=”form-1″ action=”http://baidu.com/”>
<input type=”text” name=”name” id=”name”>
<input type=”text” name=”passwd” id=”passwd”>
<button type=”submit”>提交</button>
</form>
<form method=”post” name=”form-2″ id=”form-2″ action=”http://baidu.com/” onsubmit=”return validate_form(this)”>
<input type=”text” name=”name” id=”name-2″>
<input type=”text” name=”passwd” id=”passwd-2″>
<button type=”submit”>提交</button>
</form>
</body>
<script type=”text/javascript”>
// with() 指定作用域函数。在用于表单时，直接输入表单中的name值，就可以获取该元素的dom
function validate_required(fieled) {
with (fieled) {
if (value == null || value == “”) {
// 可以做一些提示操作
alert(“用户的账号、密码不可为空”);
return false;
} else {
return true;
}
}
}
function validate_form(form) {
with (form) {
if (validate_required(name) == false) {
name.focus();
return false;
}
if (validate_required(passwd) == false) {
passwd.focus();
return false;
}
alert(“返回true,可以提交表单”);
return true; // 可以省略
}
}
</script>
</html>
应届生前端开发好找工作 35岁前端开发找工作 自学前端开发找工作
» 本文来自：前端开发者 » 《前端开发form表单提交》
» 本文链接地址：https://www.rokub.com/5843.html
» 您也可以订阅本站：https://www.rokub.com
评论前必须登录！
注册