php 提交成功弹窗,如何在成功提交后关闭弹出窗口

我的网站很简单，它有文字说“点击这里”，点击 将在屏幕中心打开一个模式类型的联系表单。如何在成功提交后关闭弹出窗口

当前表单提交时，它延迟1秒，然后调用submit.php 将数据发送到我的电子邮件。

而不是重定向到submit.php，我想保持在同一页面上，并简单地关闭弹出式联系表格 。

因此，它应该是这样的：

点击“点击这里”>详细填写弹出形式>点击提交>表单提交后1秒钟，然后完全关闭。(无需重新直接)

您可以查看我的演示站点here.

下面是HTML表单：

On submit, this window should close

Submit here

你可以看到表单ID是“联系形式”和按钮ID为“flybutton”

以下脚本目前使用此数据，延迟1秒，提交表单，然后将 重定向到submit.php。

相反，我需要它延迟1秒，提交表单，然后关闭弹出窗口(和黑色背景)。

目前我有一个脚本，将通过Escape键关闭窗体，所以也许这可能以某种方式实现？ 我觉得我的脚本需要以某种方式组合。

这里是我的脚本有：

1秒的延迟+提交表单

var $btn = $('#flybutton');

$("#contactform").validate({

submitHandler: function (form) {

fly(form);

}

});

$btn.on('fliyingEnd', function (e, form) {

form.submit();

})

function fly(form){

$btn.toggleClass('clicked');

$btn.find('p').text(function(i, text) {

return text === "Fire!" ? "Fire!" : "Fire!";

});

setTimeout(function() {

$btn.trigger('fliyingEnd', [form]);

}, 1000);

}

关闭格式框(＃登录框)和黑色背景(#mask)通过ESC键：

$(document).keyup(function(e) {

if (e.keyCode == 27) {

$("#mask").fadeOut(300);

}

if (e.keyCode == 27) {

$("#login-box").fadeOut(300);

}

});

其他用户帮助这个脚本都Ø我不知道它的目的：

$(document).ready(function() {

$('a.login-window').click(function() {

//Getting the variable's value from a link

var loginBox = $(this).attr('href');

//Fade in the Popup

$(loginBox).fadeIn(300);

//Set the center alignment padding + border see css style

var popMargTop = ($(loginBox).height() + 24)/2;

var popMargLeft = ($(loginBox).width() + 24)/2;

$(loginBox).css({

'margin-top' : -popMargTop,

'margin-left' : -popMargLeft

});

// Add the mask to body

$('body').append('

$('#mask').fadeIn(300);

return false;

});

// When clicking on the button close or the mask layer the popup closed

$('a.closest, #mask').bind('click', function() {

$('#mask , .login-popup').fadeOut(300 , function() {

$('#mask').remove();

});

return false;

});

});

能否请你告诉我，为了得到我所需要的功能要编辑的代码？

UPDATE： 我已经纳入AJAX，但我有一个问题。具体来说，表单提交但它仍然重定向。

包括在此我下​​面表格

，这里是脚本..如何让我没有重新直接？

$(document).ready(function() {

/* Attach a submit handler to the form */

$("#contactform").submit(function(event) {

/* Stop form from submitting normally */

event.preventDefault();

/* Clear result div*/

$("#result").html('');

/* Get some values from elements on the page: */

var values = $(this).serialize();

/* Send the data using post and put the results in a div */

$.ajax({

url: "submit.php",

type: "post",

data: values,

success: function(){

alert("success");

$("#result").html('');

},

error:function(){

alert("failure");

$("#result").html('An error occurred');

}

});

});

});

非常感谢！

+1

为了不“刷新”的页面，你需要使用AJAX调用 - 这将使一个请求，并没有从当前页面导航离去返回响应。你可以在这里找到更多：http://api.jquery.com/jquery.ajax/。标准表单POST(您目前正在执行的操作)总是需要重新加载页面 - 您总是可以重新加载相同的页面。 –

2015-02-24 20:45:51

+0

您可以提供解决方案吗？现在任何事情都会有帮助。与此同时，我会研究AJAX。谢谢 –

2015-02-24 21:24:56

+0

没关系，我在这里找到了一个坚实的链接，应该有所帮助http://stackoverflow.com/questions/5004233/jquery-ajax-post-example-with-php/14217926#14217926 –

2015-02-24 21:34:30