Pop-up window unwantedly closes after submitting a form

Question

When I try to find a solution to my problem, I only come across people who have the opposite problem of mine.

I'm loading a pop-up div with javascript. Inside the div I'm running a PHP form. My problem is that whenever I submit the form, my pop-up div automatically closes. I want the pop-up to remain visible while the PHP-echo's display within the pop-up div after submitting.

I'm very new to both javascript and PHP and while I've tried to figure out what goes wrong (I'm assuming the problem sits within my javascript), I can't seem to find out what's wrong.

This is my Javascript, which I got from istockphp.com

jQuery(function($) {

$("a.topopup").click(function() {
        loading(); // loading
        setTimeout(function(){ // then show popup, deley in .5 second
            loadPopup(); // function show popup
        }, 500); // .5 second
return false;
});

/* event for close the popup */
$("div.close").hover(
                function() {
                    $('span.ecs_tooltip').show();
                },
                function () {
                    $('span.ecs_tooltip').hide();
                }
            );

$("div.close").click(function() {
    disablePopup();  // function close pop up
});

$(this).keyup(function(event) {
    if (event.which == 27) { // 27 is 'Ecs' in the keyboard
        disablePopup();  // function close pop up
    }
});

$("div#backgroundPopup").click(function() {
    disablePopup();  // function close pop up
});

$('a.livebox').click(function() {
    alert('Hello World!');
return false;
});

 /************** start: functions. **************/
function loading() {
    $("div.loader").show();
}
function closeloading() {
    $("div.loader").fadeOut('normal');
}

var popupStatus = 0; // set value

function loadPopup() {
    if(popupStatus == 0) { // if value is 0, show popup
        closeloading(); // fadeout loading
        $("#toPopup").fadeIn(0500); // fadein popup div
        $("#backgroundPopup").css("opacity", "0.7"); // css opacity, supports IE7, IE8
        $("#backgroundPopup").fadeIn(0001);
        popupStatus = 1; // and set value to 1
        actionResponse.setWindowState(LiferayWindowState.EXCLUSIVE);
    }
}

function disablePopup() {
    if(popupStatus == 1) { // if value is 1, close popup
        $("#toPopup").fadeOut("normal");
        $("#backgroundPopup").fadeOut("normal");
        popupStatus = 0;  // and set value to 0
    }
}
/************** end: functions. **************/
}); // jQuery End

This is my PHP:

$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$from = 'From: Contactformulier'; 
$to = 'info@mywebsite.nl'; 
$subject = $_POST['subject'];
$human = $_POST['human'];

$body = "Afzender:\n $name\n\n E-Mail:\n $email\n\n Onderwerp:\n $subject\n\n Bericht:\n $message";

if ($_POST['submit']) {
    if ($name != '' && $email != '') {
        if ($human == '4') {                 
            if (mail ($to, $subject, $body, $from)) { 
            echo '<p>Your message has been sent!</p>';
        } else { 
            echo '<p>Something went wrong, go back and try again!</p>'; 
            } 
    } else if ($_POST['submit'] && $human != '4') {
        echo '<p>You answered the anti-spam question incorrectly!</p>';
    }
    } else {
        echo '<p>You need to fill in all required fields!!</p>';
    }
}

Answer 1

Does the page reload and therefore the pop-up closes? If so, you need to prevent the default behavior of the form's submit button.

Answer 2

When the form submits, the page reloads. You basically have two options to prevent the popup from disappearing.

One option, as suggested by Jay Kravetz, is to prevent the default form submission and turn that into an Ajax request. You'd need to submit to "test2.php":

<form action="test2.php" method="post">

Then test2.php would only contain the HTML inside of your "toPopup" div.

Then you'd use a jQuery ajax form submission as described in this SO post to avoid reloading the page because of the form submission.

The second option is to change test.php so that inside

if ($_POST['submit']) {
  echo '<div id="popup_content" class="showImmediately">';
  //other logic here
} else {
  echo '<div id="popup_content">';
}

Then in your css, add:

.showImmediately { display: block !important; }

Instead of the CSS, you could also add this at the bottom of your jQuery function:

if ($('.showImmediately').length > 0) {
    loading(); // loading
    setTimeout(function(){ // then show popup, deley in .5 second
        loadPopup(); // function show popup
    }, 500); // .5 second
}