首页 > 代码库 > form表单提交问题

form表单提交问题

2024-08-17 05:57:45   226人阅读

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="http://www.mamicode.com/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 = "http://www.mamicode.com/保存">
</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="http://www.mamicode.com/url";
            } else{
            }
        }
    });
    return false;
}

 

 

这样就没有问题了, 可以成功保存一条数据, 并且保存之后可以跳转到指定url.

form表单提交问题


联系
我们