点击button自动提交表单原因及解决方案

在做登录的时候,需要ajax提交验证,但是发现点击button会自动submit表单,代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
<style type="text/css">
html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
  background-color: #3C8DBC;
}

form {
  width: 400px;
  height: 400px;
  top: 50%;
  left: 50%;
  margin-left: -200px;
  margin-top: -200px;
  position: absolute;
  background-color: #FFF;
  background-color: rgba(255, 255, 255, 0.3);
  display: flex;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 15px 0 15px -15px #000, -15px 0 15px -15px #000; -
  -borderWidth: 2px;
  border-radius: var(- -borderWidth);
}

h1 {
  color: #FFF;
  font-weight: bold;
  text-shadow: 2px 2px 5px #002478;
}

.loginInput {
  width: 173px;
  height: 24px;
}

.loginBtn {
  height: 30px;
  color: white;
  font-size: 16px;
  background-color: #3C8DBC;
  border-color: #3C8DBC;
  border-radius: 4px;
}

.loginBtn:hover {
  background-color: #1360a7;
  border-color: #1360a7;
}
</style>
</head>
<body>
  <form action="login.do">
    <h1>系统登陆</h1>
    <hr>
    <input type="text" class="loginInput" placeholder="登录帐号"><br> <input
      type="password" class="loginInput" placeholder="登录密码"><br>
    <button class="loginInput loginBtn">按钮点击</button>
  </form>
</body>
</html>

点击提交后,会提交到form指定的action

原来是button在form里面会submit事件,最后只能改成input,然后将类型设置为submit,然后写js方法返回false即可不自动提交表单

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
<style type="text/css">
html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
  background-color: #3C8DBC;
}

form {
  width: 400px;
  height: 400px;
  top: 50%;
  left: 50%;
  margin-left: -200px;
  margin-top: -200px;
  position: absolute;
  background-color: #FFF;
  background-color: rgba(255, 255, 255, 0.3);
  display: flex;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 15px 0 15px -15px #000, -15px 0 15px -15px #000; -
  -borderWidth: 2px;
  border-radius: var(- -borderWidth);
}

h1 {
  color: #FFF;
  font-weight: bold;
  text-shadow: 2px 2px 5px #002478;
}

.loginInput {
  width: 173px;
  height: 24px;
}

.loginBtn {
  height: 30px;
  color: white;
  font-size: 16px;
  background-color: #3C8DBC;
  border-color: #3C8DBC;
  border-radius: 4px;
}

.loginBtn:hover {
  background-color: #1360a7;
  border-color: #1360a7;
}
</style>
</head>
<body>
  <form action="login.do" οnsubmit="return login();">
    <h1>系统登陆</h1>
    <hr>
    <input type="text" class="loginInput" placeholder="登录帐号"><br> 
    <input type="password" class="loginInput" placeholder="登录密码"><br>
    <input type="submit" class="loginInput loginBtn" value="登录"><br>
  </form>
  <script type="text/javascript">
  	function login() {
  	  // 此处写 ajax 请求后台代码
  	  alert('登录成功');
  	  return false;
  	}
  </script>
</body>
</html>

svygh123

发布了64 篇原创文章 · 获赞 34 · 访问量 10万+

私信关注

点击button自动提交表单原因及解决方案

猜你喜欢