[英]jQuery form submission issue
我有一个要在fancybox(www.fancybox.net)内提交的表单。 如果我直接进入表格,它将被罚款。 但是,如果我在页面内部加载表单,则我想从表单调用fancybox不会提交,fancybox消失,页面刷新。 我已经尝试了fancybox和facebox到同一问题。.下面是我在主页中都拥有的Jquery代码。 此页面将打开“花式框”,然后打开提交表单。 表单提交时应该在窗口中显示感谢消息,而不是刷新页面。.非常感谢您的帮助:
JavaScript:
$(document).ready(function () {
$("#various1").fancybox({
'opacity': true,
'overlayShow': false,
'transitionIn': 'none',
'autoscale': 'false',
'transitionOut': 'none'
});
$("submit").submit(function () {
alert('it submits');
// we want to store the values from the form input box, then send via ajax below
var name = $('#name').attr('value');
var email = $('#email').attr('value');
var password = $('#password').attr('value');
var custom1 = $('#custom1').attr('value');
var custom2 = $('#custom2').attr('value');
var custom3 = $('#custom3').attr('value');
var custom4 = $('#custom4').attr('value');
var custom5 = $('#custom5').attr('value');
var custom6 = $('#custom6').attr('value');
var custom7 = $('#custom7').attr('value');
var custom8 = $('#custom8').attr('value');
var custom9 = $('#custom9').attr('value');
var custom10 = $('#custom10').attr('value');
$.ajax({
type: "POST",
url: "test.php",
data: "name=" + name + "& email=" + email + "& password=" + password + "& custom1=" + custom1 + "& custom2=" + custom2 + "& custom3=" + custom3 + "& custom4=" + custom4 + "& custom5=" + custom5 + "& custom6=" + custom6 + "& custom7=" + custom7 + "& custom8=" + custom8 + "& custom9=" + custom9 + "& custom10=" + custom10,
success: function () {
$('submit').fadeOut(function () {
$('div.success').fadeIn();
});
}
});
return false;
})
; });
链接至表格:
<a id="various1" href="register.php">
data: "name=" + name + "& email=" + email + "& password=" + password + "& custom1=" + custom1 + "& custom2=" + custom2 + "& custom3=" + custom3 + "& custom4=" + custom4 + "& custom5=" + custom5 + "& custom6=" + custom6 + "& custom7=" + custom7 + "& custom8=" + custom8 + "& custom9=" + custom9 + "& custom10=" + custom10,
太错了,不正确而且丑陋。 &
后面不应有空格。 实际上,在那里传递字符串已经很糟糕了。 传递这样的对象:
var data = { name: name, email: email, password: password, custom1: custom1, ... };
使用data: data
这是固定版本:
$(document).ready(function () {
$("#various1").fancybox({
'opacity': true,
'overlayShow': false,
'transitionIn': 'none',
'autoscale': 'false',
'transitionOut': 'none'
});
$("form").submit(function () {
var data = {
name: $('#name').val(),
email: $('#email').val(),
password: $('#password').val(),
custom1: $('#custom1').val(),
custom2: $('#custom2').val(),
custom3: $('#custom3').val(),
custom4: $('#custom4').val(),
custom5: $('#custom5').val(),
custom6: $('#custom6').val(),
custom7: $('#custom7').val(),
custom8: $('#custom8').val(),
custom9: $('#custom9').val(),
custom10: $('#custom10').val()
};
$.ajax({
type: "POST",
url: "test.php",
data: data,
success: function() {
$('submit').fadeOut(function () {
$('div.success').fadeIn();
});
}
});
return false;
})
您确实应该使用jquery表单插件来提交该表单。.省去了键入所有字段名称的工作量...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.