form表单提交问题
1.提交后不能跳转到指定页面
jsp代码


<form class="form-horizontal" role="form">
<p class="task-title">新增</p>
<div id="field-list">
<!--表单项-->
</div>
<button type="submit"</span> class="btn btn-primary" value="">保存</button>
</form>


js提交事件处理:


$(".btn-primary").click(function(){
$.post("url", {
para
}, function(data) {
window.history.back();
});
})


这种写法在页面点击保存后在当前页面跳转, 而不执行post请求function(data){}中的方法:window.history.back()返回到上一级历史页面,分析原因是button的type是submit, Submit会将表单提交(form.submit())作为其onclick后的默认事件, 执行完onClick, 转到action. 默认在当前页跳转.
这样不行于是试了试去掉type="submit"
<button class="btn btn-primary" value="">保存</button>
依然不行, 查了查发现<button> 这个按钮放在 form 中也会点击自动提交.
解决办法: type改成button
<button type="button" class="btn btn-primary" id="save_or_update_btn">保存</button>
于是可以了.
2.不用button的onclick()方法提交表单,改用form的onsubmit.
jsp代码


<form class="form-horizontal" role="form" method="post" onsubmit="return postData()">
<p class="task-title">新增</p>
<div id="field-list">
<!-- 表单项-->
</div>
<button type="submit"class="btn btn-primary" value="">保存</button>
</form>


js代码:


$(".btn-primary").click(function() {
$(".form-horizontal").submit();
}); function postData() {
$.post("url", $(".form-horizontal").serializeArray(), function(data) {
if (data) {
if (data.success){
location.href="url";
} else{ }
}
});
return false;
}


可以跳转到指定url了, 也可以保存数据到数据库, 但是会一次保存两条. 分析原因是因为form表单中的button有着自动提交功能, 点击保存后button提交一次, form表单中的onsubmit又执行postData()方法提交一次, 因此数据库中会存入两条相同的数据.
既然submit容易出错,那就不用submit了,改为如下代码:
jsp


<form class="form-horizontal" role="form" method="post" onsubmit="return postData()">
<p class="task-title">新增</p>
<div id="field-list">
<!-- 表单项-->
</div>
<input type="button"</span> class="btn btn-primary" value = "保存">
</form>


js


$(".btn-primary").click(function() {
$(".form-horizontal").submit();
}); function postData() {
$.post("url", $(".form-horizontal").serializeArray(), function(data) {
if (data) {
if (data.success){
location.href="url";
} else{
}
}
});
return false;
}


这样就没有问题了, 可以成功保存一条数据, 并且保存之后可以跳转到指定url.
form表单提交问题的更多相关文章
- Form表单提交数据的几种方式
一.submit提交 在form标签中添加Action(提交的地址)和method(post),且有一个submit按钮(<input type='submit'>)就可以进行数据的提交, ...
- jQuery Form 表单提交插件-----formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的 应用
一.jQuery Form的其他api 1. formSerialize 将表单序列化成查询串.这个方法将返回一个形如: name1=value1&name2=value2的字符串.是否可 ...
- jQuery Form 表单提交插件----Form 简介,官方文档,官方下载地址
一.jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxF ...
- Checkbox框全选操作,form表单提交与jquery ajax提交两种处理方式
//1.jquery ajax<script type="text/javascript"> $(function(){ var basePath = $(" ...
- form表单提交
1.form表单提交.html页面失败 <%--客户端form--%> <form id="form2" action="LoginOne.html&q ...
- ajax form表单提交 input file中的文件
ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了 ...
- 2017-01-11小程序form表单提交
小程序form表单提交 1.小程序相对于之前的WEB+PHP建站来说,个人理解为只是将web放到了微信端,用小程序固定的格式前前端进行布局.事件触发和数据的输送和读取,服务器端可以用任何后端语言写,但 ...
- SpringMVC中使用bean来接收form表单提交的参数时的注意点
这是前辈们对于SpringMVC接收表单数据记录下来的总结经验: SpringMVC接收页面表单参数 springmvc请求参数获取的几种方法 下面是我自己在使用时发现的,前辈们没有记录的细节和注意点 ...
- Form表单提交,Ajax请求,$http请求的区别
做过前端同学想必都避免不了要和后台server打交道.而以下这三种与后台交互的方式想必大家都不陌生. Form表单提交,Ajax请求,Angular的$http请求 以前一直搞不清楚什么时候应该用哪种 ...
- js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题
js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...
随机推荐
- yii2 解决POST 400错误
第一种解决办法是关闭Csrf public function init(){ $this->enableCsrfValidation = false; } 第二种解决办法是在form表单中加入隐 ...
- web性能优化
常用方法 压缩源码和图片 JavaScript文件源代码:可以采用混淆压缩的方式,CSS文件源代码进行普通压缩,JPG图片可以根据具体质量来压缩为50%到70%,PNG可 以使用一些开源压缩软件来压缩 ...
- jQuery学习过程问题笔记
1. jQuery中,$('selector').click(function(){})和用bind绑定:$('selector').bind('click',function(){})有什么区别? ...
- 各大浏览器内核介绍(Rendering Engine)
在介绍各大浏览器的内核之前,我们先来了解一下什么是浏览器内核. 所谓浏览器内核就是指浏览器最重要或者说核心的部分"Rendering Engine",译为"渲染引擎&qu ...
- expect实现自动登录
自动登录主机(ssh) 建脚本item2login.sh,包含如下内容 #!/usr/bin/expect set timeout 30 spawn ssh -p [lindex $argv 0] [ ...
- Fiddler将笔记本设置代理,抓取手机网络请求包
第一步:下载fiddler,下载地址:http://www.telerik.com/download/fiddler 第二步:安装fiddler,略过... 第三步:启动fiddler,启动后界面如下 ...
- 增量式PID推导及C语言实现
PID控制器表达式为: \[ u(t) = K_pe(t) + K_i\int_0^t e(\tau)d\tau + K_d\frac{de(t)}{dt} \] 离散化: 令 $ t = nT,~T ...
- SAP模板
用的是kuangbin的模板:http://www.cnblogs.com/kuangbin/archive/2012/09/29/2707955.html ;//点数的最大值 ;//边数的最大值 c ...
- [原创]css3简单几步画一个乾坤图
效果如上,鼠标移上去会有动画. 代码如下非常简单: <html> <head> <style> .outer{height:100px;width:200px;bo ...
- selenium webdriver 建行软键盘输入密码
driver.get("https://ibsbjstar.ccb.com.cn/app/V5/CN/STY1/login.jsp"); driver.manage().timeo ...