form表单提交问题

今天做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;
}

</pre><p></p><pre>

可以跳转到指定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>
        <span style="background-color: rgb(255, 255, 0);"><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.