点击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> <inputtype="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" onsubmit="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>

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

form表单下的button不设置type会自动提交表单
有时html页面button点击会出现自动提交表单的情况. 后来查资料得知,form表单下的按钮在没有指定type类型的时候,button会有一个默认的type="submit" ...
百度腾讯QQ等网站注册自动提交表单源码2012最新
闲的无聊的时候研究了下delphi网络模块.就简单模仿了下自动注册或者登陆网站这么一个功能来练手.闲话不多讲,代码奉上~ 以下是腾讯QQ的填写表单和自动提交代码,直供研究学习使用,不得用于其他用途啊~ ...
button按钮提交表单问题
form表单里有个Button按钮,非submit类型,但点击按钮会提交表单 <button id="btnCnfm" class="btn btn-info bt ...
[js] 如何按回车自动提交表单
[js] 如何按回车自动提交表单监听keydown事件并且判断按键代码为13,触发提交表单按钮或执行提交表单方法个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎 ...
php curlopen,php自动提交表单的方法(基于fsockopen与curl)
搜索热词本文实例讲述了PHP基于fsockopen与curl实现自动提交表单的方法.分享给大家供大家参考,具体如下: PHP自动提交表单 1. fsockopen方法: PHP;"> ...
Html:小技巧：自动提交表单的实现方法
Html:小技巧:自动提交表单的实现方法方法一: <html> <head> <title>Untitled Document</title> (1) ...
csrf测试name=submit与submit()冲突导致无法自动提交表单的解决方法
pikachu靶场环境中,post的csrf在参数中有一个submit=submit,开始poc如下 <html><body><form action="htt ...
html 360浏览器输入框自动填充,关于360浏览器自动填充表单问题以及解决方案
关于360浏览器自动填充表单问题以及解决方案浏览器发展现在的网络社会,拥有成千上万.形形色色的网站,相对应的就会存在许许多多的用户,而我们普通用户对于记住这些账号密码就显得好麻烦, 所以,现在的浏览 ...
html表单自动提交表单提交表单数据类型,表单
表单在网页中主要负责数据采集功能.一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法. 表单域:包含了文本框.密码框.隐藏域.多行文本框. ...

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

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

最新文章

热门文章