我的网站很简单,它有文字说“点击这里”,点击 将在屏幕中心打开一个模式类型的联系表单。如何在成功提交后关闭弹出窗口
当前表单提交时,它延迟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