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;
}

可以跳轉到指定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.