今天在弄一个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,阻止表单提交
}
相关推荐
在HTML表单中,我们可以添加一个事件监听器,例如“onsubmit”,当表单提交时触发Ajax请求。下面是一个简单的例子: ```html <form id="myForm"> 提交" onclick="submitForm()" /> </form> function submit...
通过form.on("submit(formConfig)",function(data){...})的调用,开发者可以指定当具有特定lay-filter属性的表单触发提交事件时,执行相应的函数。在这个函数内部,返回false可以阻止表单的提交,即阻止表单数据被...
submit表单提交,onsubmit验证拦截 免去了用button按钮click点击事件ajax请求
JavaScript可以绑定到表单元素的事件,如onsubmit,以便在用户尝试提交表单时触发AJAX请求。在发送请求之前,通常会先进行客户端验证,检查输入的有效性,例如电子邮件格式、手机号码格式等。 接下来,我们谈谈表单...
表单元素通常会有`onsubmit`事件处理程序,当用户提交表单时触发,此时我们可以利用AJAX来发送数据到服务器进行验证,而不是直接提交表单。 `formValidate_ajax.js`是我们的JavaScript代码,用于实现AJAX功能。在...
本实例中的“simpleAjax”可能是一个简单的Ajax实现示例,可能包含了完整的HTML、CSS和JavaScript代码,用于演示如何实现Ajax表单验证。你可以查看并学习这个示例,了解其工作原理和细节。 总之,使用Ajax进行表单...
**压缩包文件中的"ajaxForm"**可能是一个示例项目,包括HTML、JavaScript和PHP文件,用于演示如何实现Ajax表单验证。你可以通过解压文件,运行其中的示例,学习并理解Ajax验证的具体实现。 总之,Ajax表单验证结合...
虽然这个基本的Ajax表单提交示例已经展示了无刷新交互的可行性,但在实际应用中,还需要考虑更多细节。比如,进行表单验证以确保输入的有效性,对敏感数据进行加密,以及处理可能出现的错误情况。此外,随着技术的...
1. 阻止默认行为:在onsubmit事件中使用event.preventDefault()防止表单默认的提交动作。 2. AJAX提交:利用XMLHttpRequest或fetch API异步提交表单数据,实现无刷新页面更新。 3. 数据序列化:使用FormData对象可以...
2. **JavaScript事件处理**:通过监听表单的提交事件,比如`onsubmit`,阻止默认的表单提交行为,转而使用Ajax进行数据提交。 3. **Ajax请求**:使用`XMLHttpRequest`对象或者现代浏览器支持的`fetch` API发送异步...
这可以通过在onsubmit事件中返回false来阻止默认行为,然后在事件处理函数中调用submit方法来完成提交。例如: ```javascript function validateAndSubmit() { var form = document.getElementById("postform"); ...
代码如下:/** * 表单提交校验 **/function onSubmit(){ if($(‘#name’).val().length<2){ alert(“名称请不少于两个汉字”); return false; } var t = new Date().getTime(); $.ajax({ type: ...
例如,可以使用`event.preventDefault()`阻止表单的默认提交,然后通过Ajax异步提交数据。 4. **CSS样式设计** css文件用于美化表单界面,包括布局、颜色、字体等。可以使用CSS选择器来定位表单元素,如`.form-...
同时,可以添加`onsubmit`事件监听器,防止表单默认提交行为。 三、JavaScript验证 在JavaScript中,我们可以获取表单元素的值,然后进行验证。例如,检查邮箱格式、手机号码格式、必填项等。如果验证失败,可以...
在HTML代码中,表单的提交通过一个传统的提交按钮或者JavaScript函数触发。在表单提交事件中,可以通过调用event.preventDefault()来阻止表单的默认提交行为。这样,原本会导致页面刷新的表单提交动作,现在被拦截,...
- **事件监听**: JavaScript通过监听表单的`onsubmit`事件来实现提交前的验证。 - **验证规则**: 常见的验证规则包括非空检查、邮箱格式、电话号码格式、数字范围等。 2. **JavaScript表单验证** - **内置函数...
Ajax表单验证是一种在用户提交数据到服务器之前,在客户端进行数据验证的技术,它结合了Ajax(异步JavaScript和XML)和JavaScript库Prototype的功能,提供了一种高效、用户体验友好的验证方式。Prototype是一个轻量...
在本文中,我们将深入探讨如何使用jQuery和jQuery Validator插件实现Ajax提交表单以及如何高效地传递参数。jQuery是一个流行的JavaScript库,它极大地简化了DOM操作、事件处理和Ajax交互。而jQuery Validator则是...
- **事件监听**:首先,我们需要在表单元素上添加事件监听器,如`onsubmit`,以便在用户尝试提交表单时触发Ajax请求。 - **创建XMLHttpRequest对象**:在事件处理函数中,创建一个新的XMLHttpRequest实例。 - **...