`
gybin
  • 浏览: 267690 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

表单form内的button按钮自动提交的问题

    博客分类:
  • web
阅读更多

     写一个页面,有一个表单,由于对表单提交操作不熟悉,我是通过一个button点击,调用JS函数,然后在函数里操作表单的数据并提交:

<form>

……

<buttonclass="btn btn-default"onclick="javascript:submit('save.php')">提交</button>

……

</form>

      JS函数执行之后,按我的意思应该是执行一定功能之后跳转到另一个页面,但是代码如上好像是将我的表单提交了,并没有起到按钮的作用。而将<button>标签移到<form>外就能达到效果。
      1.百度解决方案,说在button中加入type="button"属性就可以了,尝试之后无效。
      2.基本同样道理,说用<input type="button">标签代替button,呵呵,所以同理的,无效。
      3.最后找到问题所在,因为我调用的JS函数名字有问题,可能是submit这种类似关键字什么的,不能使用,改换了函数名之后,上面两种方法都有效了。同样还有我名为delete()的函数,名字也不能用;之前数据库里的条目也曾因为命名而出问题。
 
      根据前辈们的总结,在表单了为了避免不必要的麻烦,button都应用input的标签代替比较好。
 
pS:  使用第一种就可以实现效果
分享到:
评论

相关推荐

    JavaScript在form表单中使用button按钮实现submit提交方法

    submit是button的一个特例,也是button的一种,它把提交这个动作...使用button按钮实现submit提交,需要在button标签中的使用onclick方法,然后在JavaScript中实现具体,代码如下: &lt;head&gt; [removed] functio

    关于layui表单中按钮自动提交的解决方法

    在使用layui框架构建Web应用时,常常会遇到表单中按钮自动提交的问题,这可能导致不必要的数据提交或页面跳转。本文将详细介绍如何解决layui表单中按钮自动提交的问题,以便更好地控制表单行为。 首先,我们需要...

    解决layui中的form表单与button的点击事件冲突问题

    在开发Web应用时,我们经常会遇到各种前端框架的交互问题,其中之一就是在layui中处理form表单与button点击事件冲突的问题。layui是一个轻量级的前端组件库,它提供了丰富的UI元素和交互功能,包括表单组件和按钮。...

    用image来提交form不想使用button提交form.docx

    在网页设计中,有时我们希望使用更具视觉吸引力的元素,比如图像(Image)来替代传统的按钮(Button)作为表单的提交方式。标题和描述提到的问题是如何使用图像提交表单而不触发双重提交的问题。双重提交可能导致...

    JS button按钮实现submit按钮提交效果

    今天在使用表单是同时使用POST更新、删除操作。然而form表单的 submit 且一旦提交则全部提交,所以想到的实现方法就是 使用button实现...下面小编给大家分享JS button按钮实现submit按钮提交效果,感兴趣的朋友参考下吧

    说说回车键触发表单提交的问题

    - **设置默认提交按钮**:通过设置`form`属性,将某个按钮指定为表单的默认提交按钮,例如`&lt;button form="myForm" type="submit"&gt;提交&lt;/button&gt;`。 - **监听键盘事件**:使用JavaScript,通过监听`keyup`或`keydown`...

    基于layui点击按钮弹出包含表单的窗口

    这个例子涵盖了layui的`form`和`layer`模块的基本使用,包括按钮事件监听、弹窗创建、表单渲染、表单验证以及表单提交。通过深入学习layui文档,你可以发掘更多高级特性和定制化选项,进一步提升你的前端开发效率。

    通过button将form表单的数据提交到action层的实例

    通过按钮将 Form 表单数据提交到 Action 层的实例 在 Web 应用程序开发中,提交 Form 表单数据到后台服务器是一个常见的操作。通常情况下,我们会使用 Form 表单的 action 属性来指定提交的路径,但是在某些情况下...

    ajax 防止按钮重复提交

    当用户在表单中填写完信息后点击提交按钮,如果此时网络环境不稳定或用户在短时间内连续点击多次提交按钮,则可能导致同一份数据被多次发送到服务器端。这种情况下,不仅增加了服务器的压力,还可能导致数据库中的...

    javascript实现点击提交按钮后显示loading的方法

    主要介绍了javascript实现点击提交按钮后显示loading的方法,涉及javascript动态设置页面元素样式的相关技巧,需要的朋友可以参考下

    js的form表单提交url传参数(包含+等特殊字符)的两种解决方法

    总结,对于在JavaScript中通过表单提交URL参数包含特殊字符(如"+")的问题,可以通过以上两种方法来解决。第一种方法是通过动态创建表单元素并在其中对参数进行编码后提交,适用于不支持HTML5 formaction属性的旧版...

    element-ui如何防止重复提交的方法步骤

    1. 对话框(Dialog)内的表单提交: 错误方案常常是在最后的回调函数中同时隐藏Dialog和恢复提交按钮的可点击性。问题在于Dialog的隐藏是一个动画过程,这期间如果用户快速点击,可能导致多次提交。正确的做法是在`...

    形考任务六 HTML 表单用于搜集不同类型的用户输入,包括文本输入、单选按钮输入、提交按钮,达到效果入下图所示。.zip

    HTML表单通过`&lt;form&gt;`标签定义,它通常包含一个或多个表单控件,如`&lt;input&gt;`、`&lt;select&gt;`、`&lt;textarea&gt;`等,以及用于提交表单的`&lt;button&gt;`或`&lt;input type="submit"&gt;`元素。例如,一个基本的HTML表单结构如下: ```...

    Ajax表单提交插件jquery form

    **Ajax表单提交插件jQuery Form** 在Web开发中,jQuery Form插件是一个非常实用的工具,它使得使用Ajax技术提交HTML表单变得简单而直观。这个插件扩展了jQuery库,提供了强大的功能,允许开发者无刷新地更新页面...

    js实现定时提交表单

    在在线考试系统中,定时提交表单是一个关键功能,它确保考生在规定时间结束后自动提交试卷,防止作弊并保证考试公平性。下面将详细介绍如何使用JavaScript实现定时提交表单的功能。 首先,我们需要理解表单(Form)...

    在IE的模式窗口中,通过表单提交到本页,并通过javascript获取提交的参数

    表单通过`&lt;form&gt;`标签定义,可以设置`action`属性指定提交的URL,`method`属性定义提交方式,通常是`GET`或`POST`。在这个场景中,`action`设置为"自身",即当前页面的URL,这样提交后页面不会刷新,而是保持在当前...

    简单的form表单模板

    在网页设计中,表单(Form)是一种至关重要的元素,它允许用户向服务器提交数据,进行各种交互操作,如注册、登录、搜索等。本文将深入探讨“简单的form表单模板”及其相关知识点。 首先,我们需要了解HTML中的`...

    修改禁止多次重复提交

    &lt;button type="submit" id="submitBtn"&gt;提交&lt;/button&gt; &lt;/form&gt; document.getElementById('myForm').addEventListener('submit', function(event) { event.preventDefault(); // 阻止默认的表单提交行为 var btn...

Global site tag (gtag.js) - Google Analytics