Всплывающее окно нежелательно закрывается после отправки формы

Question

Когда я пытаюсь найти решение моей проблемы, я сталкиваюсь только с людьми, у которых есть моя противоположная проблема.

Я загружаю всплывающее окно с javascript. Внутри div я запускаю PHP-форму. Моя проблема в том, что всякий раз, когда я отправляю форму, мой всплывающий div автоматически закрывается. Я хочу, чтобы всплывающее окно оставалось видимым во время отображения PHP-эха во всплывающем div после отправки.

Я очень новичок как в JavaScript, так и в PHP, и хотя я пытался выяснить, что пойдет не так (я предполагаю, что проблема сидит внутри моего javascript), я не могу понять, что случилось.

Это мой Javascript, который я получил от 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 

Это мой 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

Имеет ли перезагрузки страницы и, следовательно, всплывающих закрывается? Если это так, вам нужно предотвратить поведение кнопки формы формы по умолчанию.

Answer 2

Когда форма отправляется, страница перезагружается. В основном у вас есть два варианта предотвращения исчезновения всплывающего окна.

Один из вариантов, предложенный Jay Kravetz, заключается в том, чтобы предотвратить отправку формы по умолчанию и превратить ее в запрос Ajax. Вы должны были бы представить «test2.php»:

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

Тогда test2.php будет содержать только HTML внутри вашего «toPopup» дел.

Затем вы должны использовать форму представления jQuery ajax, как описано в this SO post, чтобы избежать перезагрузки страницы из-за отправки формы.

Второй вариант заключается в изменении test.php, так что внутри

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

Тогда в вашем CSS, добавьте:

.showImmediately { display: block !important; } 

Вместо CSS, вы также можете добавить это в нижней части вашей функции jQuery:

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