我正在使用Fancybox在点击链接时弹出联系表单。然后它将表单数据POST到一个php文件,一封电子邮件消失,成功消息又回来了。
我提交表单后,页面重新加载,数据似乎无处可去。如果我在不使用AJAX的情况下提交表单,它可以正常工作,但会加载新页面。
形式:
<div style="display:none">
<div id="questions">
<form id="question-form" action="" method="POST">
<p>Name</p> <input type="text" name="name">
<p>Email</p> <input type="text" name="email">
<p>Item</p> <input type="text" name="item">
<p>Message</p><textarea name="message" rows="6" cols="25"</textarea>
<br/>
<input type="submit" value="Send">
</form>
</div>
</div>
脚本
$("#question-form").bind("submit", function() {
$.fancybox.showActivity();
$.ajax({
type : "POST",
cache : false,
url : "/includes/question-mailer.php",
data : $(this).serializeArray(),
success : function(data) {
$.fancybox(data);
}
});
return false;
});
我做错了什么?
答案 0 :(得分:2)
这是一个简单的错误,我将上面的脚本放在自己的<script>
标签中,而不是在主要的fancybox附件script
中。我的最终代码是:
<script type="text/javascript">
$(document).ready(function(){
$("a.lightbox").fancybox({
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false
});
$("#question-form").bind("submit", function() {
$.fancybox.showActivity();
$.ajax({
type : "POST",
cache : false,
url : "/includes/question-mailer.php",
data : $(this).serializeArray(),
success :function(data){
$.fancybox(data);
}
});
return false;
});
});
</script>