今天做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" οnsubmit="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" οnsubmit="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.