DOM Form Events tutorial II in JavaScript

October 10, 2024

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Form Events JavaScript</title>
</head>

<body>
    <form action="" onsubmit="submitFunction()">
        <label for="">Email</label><input type="email" id="fname" onfocus="focusFunction(this)"
            onblur="blurFunction(this)" oninput="inputFunction(this)" value="Hello World"
            onchange="changeFunction(this)" onselect="selectFunction()"
            oninvalid="alert('Please enter the correct Email Id.')" required><br><br>
        <label for="">Class</label><input type="text" id="" onfocus="focusFunction(this)"
            onblue="blurFunction(this)"><br><br>
        <label for="">Country</label>
        <select id="" onfocus="focusFunction(this)" onblur="blurFunction(this)" onchange="changeFunction(this)">
            <option value="India">India</option>
            <option value="Pakistan">Pakistan</option>
            <option value="Bangladesh">Bangladesh</option>
            <option value="Sri Lanka">Sri Lanka</option>
            <option value="Nepal">Nepal</option>
        </select>
        <input type="submit">
        <br>
    </form>
    <div id="test" style="border:1px solid #ff0000"></div>
    <script>
        // JavaScript Focus Event
        function focusFunction(element) {
            element.style.background = "#00ff00";
        }

        // JavaScript Blur Event
        function blurFunction(element) {
            element.style.background = "";
        }

        // JavaScript Input Event
        function inputFunction(element) {
            var x = element.value;
            document.getElementById("test").innerHTML = x;
        }

        // JavaScript Change Event
        function changeFunction(element) {
            var x = element.value;
            document.getElementById("test").innerHTML = x;
        }

        // JavaScript Select Event
        function selectFunction() {
            console.log("You selected some text.");
        }

        // JavaScript Submit Event
        function submitFunction() {
            // console.log("You submitted a form.");
            // alert("You submitted a form.");
            var x = document.getElementById("fname").value;
            alert("Hello : " + x);
        }
    </script>
</body>

</html>