问题
想在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();
});
c.submit();
==》
c[0].submit();
调用dom对象的submit,而不是jquery对象的submit方法,jquery对象的submit方法由于你使用了validate插件会对表单内容进行验证的,没有通过时不会提交表单,用dom对象的则不会验证表单直接提交
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();//阻止表单的默认事件
再在这下面写你自己的处理代码});