我的网站很简单,它有文字说“点击这里”,点击 将在屏幕中心打开一个模式类型的联系表单。如何在成功提交后关闭弹出窗口
当前表单提交时,它延迟1秒,然后调用submit.php 将数据发送到我的电子邮件。
而不是重定向到submit.php,我想保持在同一页面上,并简单地关闭弹出式联系表格 。
因此,它应该是这样的:
点击“点击这里”>详细填写弹出形式>点击提交>表单提交后1秒钟,然后完全关闭。(无需重新直接)
您可以查看我的演示站点here.
下面是HTML表单:
<form method="post" action="submit.php" id="contactform" class="signin">
<h1>On submit, this window should close</h1>
<input name="name" id="name" type="text" class="feedback-input" placeholder="Name" />
<input name="email" id="email" type="text" class="feedback-input" placeholder="Email" required pattern="[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+(?:[A-Z]{2}|com|org|net|edu|gov|mil|biz|info|mobi|name|aero|asia|jobs|museum)" />
<div class="antispam">
<br /><input name="url" type="hidden" /></div>
<textarea name="message" id="message" class="feedback-input" placeholder="Write away!" required></textarea>
<button id="flybutton">
<p>Submit here</p>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="paper-plane-icon" d="M462,54.955L355.371,437.187l-135.92-128.842L353.388,167l-179.53,124.074L50,260.973L462,54.955z
M202.992,332.528v124.517l58.738-67.927L202.992,332.528z"></path>
</svg>
</button>
</form>
你可以看到表单ID是“联系形式”和按钮ID为“flybutton”
以下脚本目前使用此数据,延迟1秒,提交表单,然后将 重定向到submit.php。
相反,我需要它延迟1秒,提交表单,然后关闭弹出窗口(和黑色背景)。
目前我有一个脚本,将通过Escape键关闭窗体,所以也许这可能以某种方式实现? 我觉得我的脚本需要以某种方式组合。
这里是我的脚本有:
1秒的延迟+提交表单
<script>
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);
}
</script>
关闭格式框(#登录框)和黑色背景(#mask)通过ESC键:
<script type="text/javascript">
$(document).keyup(function(e) {
if (e.keyCode == 27) {
$("#mask").fadeOut(300);
}
if (e.keyCode == 27) {
$("#login-box").fadeOut(300);
}
});
</script>
其他用户帮助这个脚本都Ø我不知道它的目的:
<script type="text/javascript">
$(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('<div id="mask"></div>');
$('#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;
});
});
</script>
能否请你告诉我,为了得到我所需要的功能要编辑的代码?
我无法得到的jsfiddle工作,但here's my demo site again
UPDATE: 我已经纳入AJAX,但我有一个问题。具体来说,表单提交但它仍然重定向。
包括在此我下面表格
<div id="result"></div>
,这里是脚本..如何让我没有重新直接?
<script>
$(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');
}
});
});
});
</script>
非常感谢!
为了不“刷新”的页面,你需要使用AJAX调用 - 这将使一个请求,并没有从当前页面导航离去返回响应。你可以在这里找到更多:http://api.jquery.com/jquery.ajax/。标准表单POST(您目前正在执行的操作)总是需要重新加载页面 - 您总是可以重新加载相同的页面。 – Carl 2015-02-24 20:45:51
您可以提供解决方案吗?现在任何事情都会有帮助。与此同时,我会研究AJAX。谢谢 – Mathomatic 2015-02-24 21:24:56
没关系,我在这里找到了一个坚实的链接,应该有所帮助http://stackoverflow.com/questions/5004233/jquery-ajax-post-example-with-php/14217926#14217926 – Mathomatic 2015-02-24 21:34:30