How to close pop-up form after successful submission

Question

My website is simple, it has text saying "Click here" , that upon clicking will open a modal-type contact form in the center of the screen.

Currently when this form is submitted, it delays 1 second, then calls on submit.php to send the data to my email.

Instead of redirecting to submit.php, I'd like to remain on the same page and simply close the pop-up contact form.

So it should go like this:

Click "Click here" > Fill in details in pop-up form > Click submit > Form submits after 1 second and then closes completely. (No re-direct)

You can view my demo site here.

Here is the form 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>

You can see that the form id is "contactform" and the button id is "flybutton"

The following scripts use this data to currently, delay 1 seccond, submit the form and then redirect to submit.php.

Instead, I need it to delay 1 second, submit the form, and then close the popup window (and black background).

Currently I have a script that will close the form via Escape key, so perhaps this could be implemented somehow? I feel that my scripts just need to be combined somehow.

Here are the scripts I have:

1 second delay + submit form

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

Close form box (#login-box) and black background (#mask) via escape key:

<script type="text/javascript">
$(document).keyup(function(e) {
    if (e.keyCode == 27) {
        $("#mask").fadeOut(300);
    }
    if (e.keyCode == 27) {
        $("#login-box").fadeOut(300);
    }
});
</script>

Another user helped with this script so I don't know it's purpose:

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

Can you please tell me which code to edit in order to get the functionality I need?

I couldn't get jsFiddle working but here's my demo site again

UPDATE: I've incorporated AJAX, but am having an issue. Specifically, the form submits but it STILL redirects.

Included this underneath my form

<div id="result"></div>

and here is the script.. how do I make NO re-direct?

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

Thanks a lot!

Answer 1

This is the code that is called now one second after the user hits submit:

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

You want to get rid of the screen darkening (the mask) and the login popup after the form is submitted, so simply add in the two pieces of code to fade those elements out:

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

Answer 2

A simple thing would be:

$(document).ready(function(){

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

Answer 3

So if I got you right you want to send data to your server without redirecting across documents. You should have a look at the javascript XMLHttpRequest

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

So, I would do something like:

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);
}

then you can embed this like in @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);   
})

WARNING: braincompiled code! may contain syntax errors!

hope that helped

Answer 4

I tried your demo link and in submit.php you are storing data(i am guessing) and displaying msg

Thank you for contacting us.

We will get back to you within 24 hours.


Go Back

Instead of this msg redirect page to demo4.html using php function. header('Location: '.demo4.html);

If you upload submit.php i will give more details.