Form Events in jQuery

 <!DOCTYPE html>

<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Events jQuery</title>
<style>
    body {
        font-family: arial
    }

    #box {
        background: pink;
        padding: 10px;
        border: 1px solid #000;
    }
</style>

<body>
    <!-- Form Events : focus(), blur(), change(), Select(), Submit() -->
    <h1>Form Events</h1>
    <form action="" id="sform">
        <label for="">Name</label><input type="text" id="sname"><br><br>
        <label for="">Class</label><input type="text" id="sclass"><br><br>
        <label for="">Country</label>
        <select id="scountry">
            <option value="India">India</option>
            <option value="Pakistan">Pakistan</option>
            <option value="Bangladesh">Bangladesh</option>
            <option value="Sri Lanka">Sri Lanka</option>
            <select>
                <br><br>
                <input type="submit">
    </form>

    <div id="test" style="border:1px solid red;margin-top:20px;"></div>
    <script src="js/jquery-3.7.1.min.js"></script>
    <script src="js/events.js"></script>
</body>

</html>





event.js File
$(document).ready(function () {
    $("#sname, #sclass, #scountry").focus(function () {
        $(this).css("background-color", "lime");
    });

    // "blue()" event is used for "focus out"
    $("#sname, #sclass, #scountry").blur(function () {
        $(this).css("background-color", "");
    });

    //"change()" event is mostly used with select box
    $("#scountry").change(function () {
        $(this).css("background-color", "pink");
        var a = $(this).val();
        $("#test").html(a);
    });

    //"select()" event is mostly used with input box
    $("#sname, #sclass").select(function () {
        $(this).css("background-color", "yellow");
    });

    //"submit()" event is used when we click on submit button in Form
    $("#sform").submit(function () {
        console.log("Form Submitted");
        alert("Form Submitted");
    });
});



Comments

Post a Comment

Popular posts from this blog

Basic Syntax in jQuery

  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < link rel = "stylesheet" href = "css/style.css" > </ head > < body >     < h1 > jQuery Syntax </ h1 >     < div id = "test1" >         < h2 > Test Box 1 </ h2 >         < p > Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel aliquid molestias cum maiores perferendis             accusantium odit tempora doloribus aperiam, deserunt aliquam, magnam porro nihil quas qui dolorum placeat,             delectus aspernatur. </ p >     </ div >     < div id = "test2" >         < h2 > Test Box 2 </ h2 >  ...
Read more

Event "Target" Property in jQuery

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < meta http-equiv = "X-UA-Compatible" content = "ie=edge" >     < link rel = "stylesheet" href = "css/Event_Target_Property.css" >     < title > Event Target Property </ title > </ head > < body >     < h1 > jQuery Event.target Property </ h1 >     < div id = "box" >         < h2 > Test Box </ h2 >         < p > Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab, expedita rem maiores doloribus veritatis,             magnam, vitae placeat officiis laboriosam itaque velit autem! Impedit eos, adipisci numquam corrupti hic             r...
Read more