How can the guestbook form be improved to prevent the page from reloading when the submit button is clicked?

Issue: The page reloads when the submit button is clicked on the guestbook form, causing a poor user experience. To prevent this, we can use AJAX to submit the form data asynchronously without reloading the page. 

<script>
$(document).ready(function(){
    $('#guestbookForm').submit(function(e){
        e.preventDefault();
        
        $.ajax({
            type: 'POST',
            url: 'submit_guestbook.php',
            data: $(this).serialize(),
            success: function(response){
                // Handle the response from the server
                console.log(response);
            }
        });
    });
});
</script>

Keywords

AJAX JavaScript preventDefault FormData XMLHttpRequest

Related Questions