How can the content of a PHP file included using jQuery be updated dynamically after form submission without redirecting to a new page?

When a form is submitted, you can use AJAX with jQuery to send the form data to a PHP file, process it, and then update the content of the PHP file dynamically without redirecting to a new page. This allows for a seamless user experience without disrupting the current page. 

<?php
// process form data
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // handle form submission
    // update content dynamically
    echo "Updated content here";
    exit;
}
?>

<!DOCTYPE html>
<html>
<head>
    <title>Dynamic Content Update</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="content">
        <!-- Content to be updated dynamically -->
        Initial content here
    </div>
    
    <form id="myForm">
        <!-- Form elements here -->
        <input type="text" name="inputField">
        <button type="submit">Submit</button>
    </form>

    <script>
        $(document).ready(function() {
            $('#myForm').submit(function(e) {
                e.preventDefault();
                $.ajax({
                    type: 'POST',
                    url: 'update_content.php',
                    data: $(this).serialize(),
                    success: function(response) {
                        $('#content').html(response);
                    }
                });
            });
        });
    </script>
</body>
</html>

Keywords

PHP jQuery form submission dynamic content update AJAX

Related Questions