如何在成功提交后关闭弹出表单
How to close pop-up form after successful submission
我的网站很简单,它有文字说"点击这里",点击将在屏幕中央打开一个模态类型的联系人表单。
目前,当提交此表单时,它会延迟1秒,然后调用submit.php将数据发送到我的电子邮件。
我不想重定向到submit.php,而是想保持在同一页面上,简单地关闭弹出式联系表格。
所以应该是这样的:
单击"单击此处">在弹出表单中填写详细信息>点击提交表单在1秒后提交,然后完全关闭(无重定向)
你可以在这里查看我的演示网站。
这是表单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是"contactform",按钮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>
通过转义键关闭表单框(#登录框)和黑背景(#掩码):
<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工作,但这是我的演示网站再次
更新:我已经加入了AJAX,但是遇到了一个问题。具体来说,表单提交,但它仍然重定向。
包含在我的表单下面
<div id="result"></div>
这是剧本。。如何使NO重定向?
<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>
非常感谢!
这是在用户点击提交后一秒钟调用的代码:
$btn.on('fliyingEnd', function (e, form) {
form.submit();
})
你想在提交表单后摆脱屏幕变暗(屏蔽)和登录弹出窗口,所以只需添加两段代码即可淡出这些元素:
$btn.on('fliyingEnd', function (e, form) {
form.submit();
$('#mask').fadeOut(300);
$("#login-box").fadeOut(300);
})
一件简单的事情是:
$(document).ready(function(){
$('#a.login-window').dialog({
modal: true,
autoOpen: false,
buttons: {
Ok: function() {
$(this).dialog("close");
}
}
});
因此,如果我说得对,您希望在不重定向文档的情况下将数据发送到服务器。您应该看看javascript XMLHttpRequest
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
所以,我会做一些类似的事情:
function submit(){
var contactform=$("#contactform");
var formdata=new FormData(contactform); //create a js FormData object
https://developer.mozilla.org/en-US/docs/Web/API/FormData
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
// do something here (this is an event handler that is invoked a few times during uploading/downloading process)
}
xhr.open("POST","submit.php");
xhr.send(formdata);
}
然后你可以把它嵌入@Zach Sandlers的答案中
$btn.on('fliyingEnd', function (e, form) {
submit(); // here you send the data to the server
$('#mask').fadeOut(300);
$("#login-box").fadeOut(300);
})
警告:编译代码!可能包含语法错误!
希望对有所帮助
我尝试了你的演示链接,在submit.php中你正在存储数据(我猜)并显示消息
Thank you for contacting us.
We will get back to you within 24 hours.
Go Back
代替此消息,将页面重定向到demo4.html使用php函数。header('Location: '.demo4.html);
如果你上传submit.php,我会提供更多细节。
- 将表单张贴到MailChimp,但显示动态成功页面
- Ajax正确发布表单,但不会返回成功数据
- 只有在ajax验证成功后才能提交表单
- 使用GET方法通过AJAX成功提交表单后更改url
- ajax在成功发布表单和更改页面上
- Jquery 提交表单,在成功提交表单到 php 后添加
- 提交表单会触发 ajax 调用,该调用会在成功时发布到操作页面
- 在JSP中成功提交表单后清除表单字段
- Jquery表单插件未显示成功功能
- 如何在成功提交后关闭弹出表单
- 仅当表单成功提交时才发生jQuery事件
- 如何在表单提交时检查firebase推送事件是否成功
- 在表单提交将DOM的一部分替换为分部之后,我应该将ajax成功绑定到什么来使我的javascript工作
- 编辑当前表单向导以成功发布数据
- php表单中的JQuery-重定向到成功页面
- 始终显示联系人表单中的问题成功消息
- 在if-else中使用Jquery表单成功值
- Javascript表单成功
- 表单成功和表单验证消息的函数不同
- 节点电子邮件表单成功消息