JavaScript

Java Script form Submission

September 11, 2023

 

JavaScript to Submit Form Data?

Advantages of JavaScript Form Submission

  1. Real-Time Validation: JavaScript allows you to validate form data on the client side before sending it to the server. This enhances user experience by providing immediate feedback.

  2. Asynchronous Requests: Using JavaScript, particularly with AJAX, enables asynchronous form submissions. This means the web page doesn't need to reload, providing a smoother user experience.

  3. Dynamic User Interfaces: JavaScript can dynamically adjust the form's content based on user interactions, such as displaying additional fields or changing input types based on previous selections.

  4. Enhanced Control: With JavaScript, you have more control over the form submission process, allowing for complex behaviors such as conditional submissions or data aggregation from multiple sources.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>

        <form id="cfrm">
            <input type="text" id="name">
            <input type="email" id="mail">
            <button>
                Submit
            </button>
        </form>

        <script>
           
            var abc = document.getElementById("cfrm");

            abc.addEventListener('submit',function(e){
                e.preventDefault();

                var uname = document.getElementById("name").value;
                console.log(uname);

                var umail = document.getElementById("mail").value;
                console.log(umail);
            })
           
        </script>   
    </body>
    </html>