Question

我的网站很简单，有文字说＆＃34;点击这里＆＃34; ，点击后将在屏幕中央打开一个模态联系表格。

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

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

所以它应该是这样的：

点击＆＃34;点击此处＆＃34; ＆gt; 以弹出式表单填写详细信息＆gt; 点击提交＆gt; 表单在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是＆＃34; contactform＆＃34;按钮ID为＆＃34; flybutton＆＃34;

以下脚本目前使用此数据，延迟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>

通过转义键关闭表单框（＃login-box）和黑色背景（#mask）：

<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

更新我已经合并了AJAX，但我遇到了问题。具体来说，表单提交但 STILL 重定向。

包含在我的表单

下面

<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>

非常感谢！

Answer 1

这是用户点击提交后立即调用的代码：

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

您希望在提交表单后摆脱屏幕变暗（掩码）和登录弹出窗口，因此只需添加两段代码即可淡化这些元素：

$btn.on('fliyingEnd', function (e, form) {
    form.submit();
    $('#mask').fadeOut(300);
    $("#login-box").fadeOut(300);   
})

Answer 2

一件简单的事情就是：

$(document).ready(function(){

$('#a.login-window').dialog({
    modal: true,
    autoOpen: false,
    buttons: {
        Ok: function() {
            $(this).dialog("close");
        }
    }
});

Answer 3

因此，如果我说得对，您希望将数据发送到服务器，而无需重定向文档。你应该看一下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);   
})

警告：脑编译代码！可能包含语法错误！

希望有所帮助

Answer 4

我尝试了你的演示链接，在submit.php中你正在存储数据（我在猜测）并显示msg

Thank you for contacting us.

We will get back to you within 24 hours.


Go Back

而不是这个msg重定向页面到demo4.html 使用PHP功能。 header('Location: '.demo4.html);

如果您上传submit.php，我会提供更多详情。

如何在成功提交后关闭弹出窗体

4 个答案: