`

form的onsubmit事件中通过ajax提交表单弹出下载的问题

阅读更多

今天在弄一个ajax提交表单的功能,发现在form上写了onsubmit属性,指向的js方法中用jquery的$.ajax()方法提交表单。

问题:发现总是弹出提示下载。在火狐中调试的时候发现提交了两次。

分析:如果在onsubmit中不return false的话,onsubmit不会阻止表单提交事件,所以表单正常提交了一次,我又通过ajax方法提交了一次,导致问题的出现。

解决:在form的onsubmit属性对应的js方法前面加上return,然后在js方法里return false;就可以阻止默认的表单提交事件了。

例子:

<form method="post" action="xxx.do" onsubmit="return subForm(this);">

</form>

function subForm(){

    $.ajax(...);

    return false;//返回false,阻止表单提交

}

分享到:
评论

相关推荐

    Asp+ajax提交表单实例

    在HTML表单中,我们可以添加一个事件监听器,例如“onsubmit”,当表单提交时触发Ajax请求。下面是一个简单的例子: ```html &lt;form id="myForm"&gt; 提交" onclick="submitForm()" /&gt; &lt;/form&gt; function submit...

    防止Layui form表单重复提交的实现方法

    通过form.on("submit(formConfig)",function(data){...})的调用,开发者可以指定当具有特定lay-filter属性的表单触发提交事件时,执行相应的函数。在这个函数内部,返回false可以阻止表单的提交,即阻止表单数据被...

    submit表单提交,onsubmit验证拦截

    submit表单提交,onsubmit验证拦截 免去了用button按钮click点击事件ajax请求

    AJAX验证表单下载.rar

    JavaScript可以绑定到表单元素的事件,如onsubmit,以便在用户尝试提交表单时触发AJAX请求。在发送请求之前,通常会先进行客户端验证,检查输入的有效性,例如电子邮件格式、手机号码格式等。 接下来,我们谈谈表单...

    AJAX实例的表单验证

    表单元素通常会有`onsubmit`事件处理程序,当用户提交表单时触发,此时我们可以利用AJAX来发送数据到服务器进行验证,而不是直接提交表单。 `formValidate_ajax.js`是我们的JavaScript代码,用于实现AJAX功能。在...

    ajax表单验证实例

    本实例中的“simpleAjax”可能是一个简单的Ajax实现示例,可能包含了完整的HTML、CSS和JavaScript代码,用于演示如何实现Ajax表单验证。你可以查看并学习这个示例,了解其工作原理和细节。 总之,使用Ajax进行表单...

    ajax-表单验证

    **压缩包文件中的"ajaxForm"**可能是一个示例项目,包括HTML、JavaScript和PHP文件,用于演示如何实现Ajax表单验证。你可以通过解压文件,运行其中的示例,学习并理解Ajax验证的具体实现。 总之,Ajax表单验证结合...

    利用ajax提交form表单到数据库详解(无刷新)

    虽然这个基本的Ajax表单提交示例已经展示了无刷新交互的可行性,但在实际应用中,还需要考虑更多细节。比如,进行表单验证以确保输入的有效性,对敏感数据进行加密,以及处理可能出现的错误情况。此外,随着技术的...

    原生js form表单美化插件表单元素input select下拉框

    1. 阻止默认行为:在onsubmit事件中使用event.preventDefault()防止表单默认的提交动作。 2. AJAX提交:利用XMLHttpRequest或fetch API异步提交表单数据,实现无刷新页面更新。 3. 数据序列化:使用FormData对象可以...

    html5 Ajax表单验证实例.rar

    2. **JavaScript事件处理**:通过监听表单的提交事件,比如`onsubmit`,阻止默认的表单提交行为,转而使用Ajax进行数据提交。 3. **Ajax请求**:使用`XMLHttpRequest`对象或者现代浏览器支持的`fetch` API发送异步...

    js 提交form表单和设置form表单请求路径的实现方法

    这可以通过在onsubmit事件中返回false来阻止默认行为,然后在事件处理函数中调用submit方法来完成提交。例如: ```javascript function validateAndSubmit() { var form = document.getElementById("postform"); ...

    浅析onsubmit校验表单时利用ajax的return false无效问题

    代码如下:/** * 表单提交校验 **/function onSubmit(){ if($(‘#name’).val().length&lt;2){ alert&#40;“名称请不少于两个汉字”&#41;; return false; } var t = new Date().getTime(); $.ajax({ type: ...

    简单的表单提交代码

    例如,可以使用`event.preventDefault()`阻止表单的默认提交,然后通过Ajax异步提交数据。 4. **CSS样式设计** css文件用于美化表单界面,包括布局、颜色、字体等。可以使用CSS选择器来定位表单元素,如`.form-...

    Ajax 表单验证程序

    同时,可以添加`onsubmit`事件监听器,防止表单默认提交行为。 三、JavaScript验证 在JavaScript中,我们可以获取表单元素的值,然后进行验证。例如,检查邮箱格式、手机号码格式、必填项等。如果验证失败,可以...

    jquery实现ajax提交form表单的方法总结

    在HTML代码中,表单的提交通过一个传统的提交按钮或者JavaScript函数触发。在表单提交事件中,可以通过调用event.preventDefault()来阻止表单的默认提交行为。这样,原本会导致页面刷新的表单提交动作,现在被拦截,...

    js表单验证大全,js提交表单

    - **事件监听**: JavaScript通过监听表单的`onsubmit`事件来实现提交前的验证。 - **验证规则**: 常见的验证规则包括非空检查、邮箱格式、电话号码格式、数字范围等。 2. **JavaScript表单验证** - **内置函数...

    Ajax表单验证

    Ajax表单验证是一种在用户提交数据到服务器之前,在客户端进行数据验证的技术,它结合了Ajax(异步JavaScript和XML)和JavaScript库Prototype的功能,提供了一种高效、用户体验友好的验证方式。Prototype是一个轻量...

    jQuery Validator验证Ajax提交表单的方法和Ajax传参的方法

    在本文中,我们将深入探讨如何使用jQuery和jQuery Validator插件实现Ajax提交表单以及如何高效地传递参数。jQuery是一个流行的JavaScript库,它极大地简化了DOM操作、事件处理和Ajax交互。而jQuery Validator则是...

    ajax表单验证,自己从网上总结ajax比验证的一些东西,希望对大家有所帮助

    - **事件监听**:首先,我们需要在表单元素上添加事件监听器,如`onsubmit`,以便在用户尝试提交表单时触发Ajax请求。 - **创建XMLHttpRequest对象**:在事件处理函数中,创建一个新的XMLHttpRequest实例。 - **...

Global site tag (gtag.js) - Google Analytics