提交表单后自动重新打开弹窗表单的技术求助

Got it, let's break down why your current jQuery code isn't working and fix this issue for good.

The Problem with Your Current Code #

When you submit the form, the browser immediately refreshes the page. Any DOM changes you make in the submit event (like setting display: block) get wiped out as soon as the page reloads—so they never actually take effect for the user after the refresh.

Solution 1: PHP-Triggered Auto-Open (Quick Fix) #

Since you're using server-side PHP to handle form validation, we can have PHP tell the browser to open the popup automatically when the page reloads after a submission.

Add this script right before the closing </body> tag (or in the <head> with window.onload):

<?php 
// Check if the form was just submitted (POST request)
if ($_SERVER['REQUEST_METHOD'] === 'POST'): 
?>
<script>
// Wait for the page to fully load, then open the form
window.addEventListener('load', function() {
    openForm();
});
</script>
<?php endif; ?>

This works because after form submission, the page reloads with REQUEST_METHOD set to POST. The PHP code injects the JavaScript only in this scenario, which calls your existing openForm() function once the page is ready.

Solution 2: AJAX Submission (Better User Experience) #

For a smoother experience (no page refresh at all), you can use AJAX to submit the form. This keeps the popup open and updates the validation/success messages instantly.

Replace your existing jQuery submit handlers with this:

$('.form-container').submit(function(e) {
    // Stop the browser from reloading the page
    e.preventDefault();

    // Collect all form data
    const formData = $(this).serialize();

    // Send data to your PHP processing script
    $.ajax({
        url: '<?= $_SERVER['PHP_SELF']; ?>',
        type: 'POST',
        data: formData,
        success: function(response) {
            // Replace the form content with the updated HTML from your PHP script
            // (Make sure your contact_form_process.php outputs the full form with errors/success messages)
            $('#myForm .form-container').html(response);
            // Ensure the popup stays visible
            $('#myForm').css('display', 'block');
        },
        error: function() {
            alert('Oops, something went wrong. Please try again later.');
        }
    });
});

Note: For this to work, your contact_form_process.php should return the entire form HTML (including error messages) instead of just including it at the top of the page. That way, the AJAX response can replace the existing form with the updated version.

Why Your Original Code Failed #

Your original submit event handlers run before the page refreshes, but the refresh immediately resets the DOM. The browser never gets a chance to render the display: block change because it's already loading a new page.

内容的提问来源于stack exchange，提问作者Tim Fowler