我的网站很简单,它有文字说“点击这里”,点击后会在屏幕中央打开一个模态类型的联系形式。
当前,当提交此表单时,它会延迟1秒,然后调用submit。php将数据发送到我的电子邮件。
与其重定向到submit.php,我想保持在同一个页面上,只需关闭弹出的联系表单。
所以它应该是这样的:
单击“单击此处”
你可以在这里查看我的演示网站。
以下是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秒,提交表单,然后重定向到提交。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>
你能告诉我要编辑哪些代码才能获得我需要的功能吗?
我无法让JSFIDLE正常工作,但这是我的演示站点
更新:我已经合并了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>
谢谢!
所以,如果我没弄错的话,您希望将数据发送到服务器,而无需跨文档重定向。您应该看看javascriptXMLHttpRequest
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 answer中嵌入这个
$btn.on('fliyingEnd', function (e, form) {
submit(); // here you send the data to the server
$('#mask').fadeOut(300);
$("#login-box").fadeOut(300);
})
警告:编译过的代码!可能包含语法错误!
希望那有帮助
一件简单的事情是:
$(document).ready(function(){
$('#a.login-window').dialog({
modal: true,
autoOpen: false,
buttons: {
Ok: function() {
$(this).dialog("close");
}
}
});
这是在用户点击提交后一秒钟调用的代码:
$btn.on('fliyingEnd', function (e, form) {
form.submit();
})
您希望在提交表单后摆脱屏幕变暗(掩码)和登录弹出窗口,因此只需添加两段代码即可淡出这些元素:
$btn.on('fliyingEnd', function (e, form) {
form.submit();
$('#mask').fadeOut(300);
$("#login-box").fadeOut(300);
})
问题内容: 我有一个打开模态的按钮,但是我通过单击背景或ESC键来阻止模态关闭。 我的按钮如下所示: 使用jQuery成功后,如何关闭此模式? 我已经进行了一些测试-模式已关闭但背景已锁定,在刷新页面之前我无法做任何事情 问题答案: 要关闭引导程序模态,您可以按以下方式将“ hide”作为选项传递给模态方法。 在ajax成功内部使用此代码。 小提琴演示
我有一个通过angular $http.post将数据发布到ASPNET MVC页面的页面(..)当调用结束时,我必须提交一个表单。 基本上我执行以下操作: 当我这样做document.forms["CheckPay"]。提交();我方面有一个重定向到页面,这是我的表单的属性操作,而不是我得到一个弹出的页面,我将重定向。 我已经尝试将函数payTest()排除在“成功”之外,它可以工作,然后我认为
问题内容: 我有一个表格,基本上是上传一个文件。我要提交两次表格,第1次不包含多部分,第二次1次包含多部分。 但是我想先检查一下第一次提交表单是否成功,然后再进行第二次提交 引用@Vern后编辑 这是我的servlet部分。我在哪里确定它是否由多个部分组成。如果未将 resultType 存储到会话变量中,则返回, 现在,我要检查此“已 提交 ”或类似内容,然后第二次提交表格。 第二表单提交:在这
本文向大家介绍postgresql 如何关闭自动提交,包括了postgresql 如何关闭自动提交的使用技巧和注意事项,需要的朋友参考一下 postgresql中默认是自动提交的 查看是否是自动提交: 关闭自动提交: 另一种方式就在会话开始的时候以begin开始相当于关闭了自动提交,以end或者commit结束就可以了 补充:pg(hgdb)默认事务自动提交 默认情况下,AUTOCOMMIT(自动
本文向大家介绍php 提交表单 关闭layer弹窗iframe的实例讲解,包括了php 提交表单 关闭layer弹窗iframe的实例讲解的使用技巧和注意事项,需要的朋友参考一下 介绍一款非常好用的前端弹窗插件: layer 官网地址:http://layer.layui.com/ 根据官方的API:layer的iframe弹窗 这里以php开发为例 演示如何 提交表单后自动关闭layer弹窗 (
本文向大家介绍layer关闭弹出窗口触发表单提交问题的处理方法,包括了layer关闭弹出窗口触发表单提交问题的处理方法的使用技巧和注意事项,需要的朋友参考一下 1、前言 表单的代码: closeCurrForm函数: 2、问题及原因和解决方法 问题:上面的代码在点关闭按钮后,会确发提交表单请求,会将表单的信息进行保存操作。但关闭按钮是不需求执行保存操作的。 原因:关闭按钮没有标识type属性,系统
问题内容: 我创建了一个松弛的对话框/表单来收集用户的一些信息。表单呈现得很好,我可以毫无问题地填写表单,但是单击“提交”后它不会关闭,而是出现错误: 我们在连接时遇到了一些麻烦。再试一次? 如文档中所述,我已经发回200状态OK 。 有什么事吗 我可以看到我的应用的控制台日志。 问题答案: 仅发送200 OK还不够。 它还必须为空,或者包含正确格式的输入验证错误列表,如JSON。如果您的回复包含
我有一个模态,它有一个形式。我试图提交表单而不使用ajax刷新页面,我成功地提交了表单,但我无法隐藏模态。 带表单的引导模式: 以上模式的Ajax代码: 在弹出Modal后,我在表单中提供了一个随机的支付卡详细信息,在我提交表单后,使用ajax post调用将详细信息发布到db中,并显示支付成功的警报。但是,我无法关闭模式。请解决这个问题??