如何阻止form表单中的button按钮提交

<form action="#" method="post">
          <input type="text" name="username" class="username" placeholder="请输入您的用户名!">
          <input type="password" name="password" class="password" placeholder="请输入您的用户密码!">
          <input type="Captcha" class="Captcha" name="Captcha" placeholder="请输入验证码!">
          <button type="submit" class="submit_button">登录</button>
          <div class="error"><span>+</span></div>
</form>

每次我们点击button,button都会自动跳转刷新。如何阻止它呢?很简单!

将button代码改成

<button type="submit" class="submit_button" onClick=“submitAction();return false;”>登录</button>

这样它就不会执行默认表单提交了!

如果不喜欢这样处理,也可以在js按钮触动代码末尾中添加return false;同样可以达到相同效果!

时间: 2024-08-25 03:29:29

如何阻止form表单中的button按钮提交的相关文章

form表单中的button自动刷新页面问题

form表单中如果存在button的话,有可能会出现一个问题:点击button,触发了页面的自动刷新事件. 原因是因为<button>标签默认的类型是submit,即默认的button点击就会触发表单的提交事件. <button></button> <!-- 两者是相当的 --> <button type="sumbit"></button> 解决的办法有三个. 1.在<button>标签中添加属性ty

form表单的button按钮问题

最近写了一个KendoUI 的kendowindow组件,组件里包含了一个form表单,表单里有一个button,不是提交保存的按钮,而是链接到另一个kendowindow的按钮,跟请求提交毫无关系,但是点击这个button的时候,表单总会直接自动提交,解决方法(3种如下): 1.button换成了span,问题解决. 2.将button标签加上 type="button"的属性 3.用<input type="button"> 标签

关于form表单中button按钮自动提交问题

坑:点击确认按钮,form表单提交2次,发送后台2次请求 //错误代码: <Button id="btnSubmit" name="btnSubmit" class="btn btn-primary" >确认</Button> $("#btnSubmit").click(function(){ $('#formSave').ajaxSubmit(function(data) { if(data.code

form表单中多个button按钮必须声明type类型

最近在做一个后台管理系统,发现了一个小bug: 问题描述:form表单中有多个button按钮(以下图为例),如果第一个button不写type属性,那么点击第一个button按钮会触发submit事件: 解决办法:给第一个按钮加上type属性. 原文地址:https://www.cnblogs.com/crf-Aaron/p/8336934.html

angularjs解决方案之 Form表单中按钮提交

在form表单中如果有子表时,子表中的按钮默认的提交方式是submit,如果不这是btn的类型为button的话,点击子表按钮操作时,主表单也是会提交的. <button class="'+ n.btnClass +'" type="button" ng-click="operationRow(\''+meta.row+'\')">'  +<i class="'+ n.iClass +'"></i

dwz的form表单中url的变量替换

form表单中action的地址格式 “__URL__/edit/{xxx}”,大括号内的 “xxx” 就是变量名,主要功能是结合table组件一起使用. 下图中的删除.编辑.修改密码都是用了url变量替换: 删除.编辑.修改密码使用了变量{sid_user},特别需要注意的是变量命名的格式,必须以"sid_"开头,这样后台可以直接以变量"sid"接收. <tbody>中<tr target="sid_user" rel=&qu

如何在一个form表单中实现多个submit

As we all know,通过设置input type=“submit”,我们可以把form表单中的值通过post方式传递给action所指向的页面.下图中,我们可以把userName,userAge,userSex这三个值传递到xxx.jsp <form action="xxx.jsp" method="post">            <input type="text" name="userName&quo

form表单reset重置按钮

如果ajax提交完数据,后想清空表单内容 ,以前都是用这个方法$("#id").val(""); 一个一个清空的,其实可以在form表单中加个隐藏的<input type="reset"  style="display:none/>的重置按钮,ajax提交后调用下 $("input[type=reset]").trigger("click"); 就可以把输入框的值重置为默认值了(注意r

关于form表单中method里get和post的区别

在html里form可谓不得不用的一条代码,而form里的method选项里只有get和post两种. 因为我们大多数情况下只有post,所以get和post的区别很容易被遗忘. 简单区别来讲: get提交:提交的数据会在ul上进行提交,明文不加密,不安全,提交的数据有限. Post提交:以form表单封装的方式提交,适合提交大量的数据,相对安全. 虽然我们很少用get,但是我们一定常见到这种方式,只是我们很少注意到罢了. 比如,百度的搜索内容就是用的get方式,我们可以在url上看到我们都提交