What is the significance of using JavaScript to handle the Submit event and display input field values?

By using JavaScript to handle the Submit event and display input field values, we can create a more dynamic and interactive user experience without the need to reload the page. This allows for real-time validation of input fields, error messaging, and immediate feedback to the user. Additionally, it can improve the overall performance of the web application by reducing server requests.

<!DOCTYPE html>
<html>
<head>
    <title>Form Submission</title>
    <script>
        function handleSubmit() {
            var name = document.getElementById('name').value;
            var email = document.getElementById('email').value;
            var message = document.getElementById('message').value;
            
            alert("Name: " + name + "\nEmail: " + email + "\nMessage: " + message);
        }
    </script>
</head>
<body>
    <form onsubmit="handleSubmit(); return false;">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name"><br><br>
        
        <label for="email">Email:</label>
        <input type="email" id="email" name="email"><br><br>
        
        <label for="message">Message:</label>
        <textarea id="message" name="message"></textarea><br><br>
        
        <input type="submit" value="Submit">
    </form>
</body>
</html>