为何submit 按钮的js里面无法 submit 表单?

问题
想在submit 按钮的JS代码中,检验sample_form 的参数,然后提交表单,发现 submit() 函数不起作用怎么解决?
照着网上查到的例子来写的,咋就不行呢?
网上的submit例子

我的代码

     $("#form_wizard .button-submit").click(function(h) {
        alert("You just finished the wizard. :-)");  // 打印成功
        c.attr('action',"user/performTest"); //  var c = $("#sample_form"); 见form_wizard.js 文件开头

        c.attr('method',"GET");
        alert(c.serialize());  // sample_form的所有参数都成功打印出来了
        c.submit();  // 浏览器的开发工具里看不到URL,后台也没有收到URL
        alert(c.attr('action') + "  " + c.attr('method'));    // 两个变量都成功打印出来了 
    }).hide();

基本情况:
1,html 文件是 form_wizard.html

2,JS 文件是 form_wizard.js

 "use strict";
$(document).ready(function() {
    var c = $("#sample_form");
    var d = $("#form_wizard");
    var a = $(".alert-danger", c);
    var f = $(".alert-success", c);
    c.validate({
        doNotHideMessage: true,
        focusInvalid: false,
        invalidHandler: function(h, g) {
            f.hide();
            a.show()
        },
        submitHandler: function(g) {
            f.show();
            a.hide();
        }
    });
    var e = function() {
        $("#tab4 .form-control-static", c).each(function() {
            var g = $('[name="' + $(this).attr("data-display") + '"]', c);
            if (g.is(":text") || g.is("textarea")) {
                $(this).html(g.val())
            } else {
                if (g.is("select")) {
                    $(this).html(g.find("option:selected").text())
                } else {
                    if (g.is(":radio") && g.is(":checked")) {
                        $(this).html(g.attr("data-title"))
                    }
                }
            }
        })
    };
    var b = function(k, g, h) {
        /*var str = JSON.stringify(k); 
        alert(str);
        str = JSON.stringify(g); 
        alert(str);
        str = JSON.stringify(h); 
        alert(str);*/

        var l = g.find("li").length;
        var m = h + 1;
        $(".step-title", d).text("Step " + (h + 1) + " of " + l);
        $("li", d).removeClass("done");
        var n = g.find("li");
        for (var j = 0; j < h; j++) {
            $(n[j]).addClass("done")
        }
        if (m == 1) {
            d.find(".button-previous").hide()
        } else {
            d.find(".button-previous").show()
        }
        if (m >= l) {
            d.find(".button-next").hide();
            d.find(".button-submit").show();
            e()
        } else {
            d.find(".button-next").show();
            d.find(".button-submit").hide()
        }
    };
    d.bootstrapWizard({
        nextSelector: ".button-next",
        previousSelector: ".button-previous",
        onTabClick: function(i, g, h, j) {
            f.hide();
            a.hide();
            if (c.valid() == false) {
                return false
            }
            b(i, g, j)
        },
        onNext: function(i, g, h) {
            f.hide();
            a.hide();
            if (c.valid() == false) {
                return false
            }
            b(i, g, h)
        },
        onPrevious: function(i, g, h) {
            f.hide();
            a.hide();
            b(i, g, h)
        },
        onTabShow: function(j, g, i) {
            var k = g.find("li").length;
            var l = i + 1;
            var h = (l / k) * 100;
            d.find(".progress-bar").css({
                width: h + "%"
            })
        }
    });
    d.find(".button-previous").hide();
    $("#form_wizard .button-submit").click(function(h) {
        alert("You just finished the wizard. :-)"); 
        c.attr('action',"user/performTest");
        c.attr('method',"GET");
        alert(c.serialize());
        c.submit();
        alert(c.attr('action') + "  " + c.attr('method'));     
    }).hide();
});

4个回答

c.submit();
==》

c[0].submit();

调用dom对象的submit,而不是jquery对象的submit方法,jquery对象的submit方法由于你使用了validate插件会对表单内容进行验证的,没有通过时不会提交表单,用dom对象的则不会验证表单直接提交

showbo
支付宝加好友偷能量挖,胡杨等着我的招呼 回复tonyliang_id: c是jquery对象,通过[]操作符转为dom对象,找jquery的api好好看看
4 年多之前 回复
tonyliang_id
tonyliang_id 多谢!膜拜!不明白为何要增加[0]?明明C是一个变量,咋感觉成了数组?
4 年多之前 回复
 c.attr('action',"user/performTest"); 
 c.attr('method',"GET");这两个属性直接写到form中,
 把提交按钮的type设为submit,
 把js的验证都去掉
 这样看看有没有提交

各种调试以后,伤心无比,只好用ajax 土办法了。虽然问题解决了,仍然期待高手给出正解!

        var url = "user/peformTest";    

        $.ajax({ 
            type : "get", 
            url : url, 
            data : c.serialize(), //parameters of form, c = $("#sample_form");
            async : false, 
            success : function(data){
                    var str = JSON.stringify( data );
                    alert(str); 
                } 
            });

第一个方法:把提交按钮放在form外边,设置按钮type=button,之后绑定click事件进行操作,放在form表单里的按钮会有默认的提交事件,所以你再写自己的提交事件是会出问题的。
第二个方法:按钮还是写在form里面,type=submit,给这个按钮绑定单击事件$('x').on('click',function(e){e.preventDefault();//阻止表单的默认事件
再在这下面写你自己的处理代码});

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐