Sunday, November 26, 2017

Part 7 - JQuery Events - #Form Events | blur, focus, change, submit, select methods



JQuery Events?
ln this tutorial will discuss about Events in jquery specially, Form Events. We have several type of event types available which consists a lot of methods to perform some action when some event occur.

Event types

1. Mouse Events 
  1. click (): Occurs when a mouse click.
  2. dblclick () :Occurs when a mouse double-click.
  3. mousedown (): Occurs when mouse button is pressed.
  4. mouseup (): Occurs when mouse button is released
  5. mouseenter (): Occurs when mouse enters in an element region.
  6. mouseleave (): Occurs when mouse leaves an element region.
  7. mousemove (): Occurs when mouse pointer moves.
2. Keyboard Events 
  1. Keydown (): Occurs when key is pressed.
  2. Keypress (): Occurs when key is pressed and released.
  3. Keyup (): Occurs when key is released..
3. Form Events 
  1. blur (): Occurs when the element loses focus.
  2. change (): Occurs when the element changes.
  3. focus (): Occurs when the element gets focus.
  4. Submit (): Occurs when form is submitted
  5. Select ():Occurs when input text is selected

4. Document/windows Events 
  1. load (): Occurs when document is loaded.
  2. Resize (): Occurs when window is resized.
  3. Scroll (): Occurs when window is scrolled.
  4. Unload (): Occurs when documents is unloaded. are actions that can be detected by your Web Application.


# Example
Replace your html code with below code 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-3.2.1.min.js"></script>

    <script>

        $(document).ready(function () {

           

            $("#text1").blur(function (event) {

                $(this).css({"background-color":"red","color":"white"})

            })

            $("#text2").change(function (event) {

                $(this).css({ "background-color": "blue", "color": "white" })

            })

            $("#text3").focus(function (event) {

                $(this).css({ "background-color": "green", "color": "white" })

            })

            $("#myform").submit(function () {

                var first = $("#first").val();
                var second = $("#second").val();
                $("span").text(first + " " + second);


            })

            $("#select1").select(function () {

                alert("something selected")

            })
        })



    </script>
    <style>
        .btnclass {
            height: 100px;
            width: 100px;
        }
    </style>

</head>
<body>

    <input type="text" id="text1" placeholder="blur event" />

    <input type="text" id="text2" placeholder="change event" />
    <input type="text" id="text3" placeholder="focus event" />
    <br /><br />
    <form id="myform">
        
        <input type="text" id="first" placeholder="first name" />
        <input type="text" id="second" placeholder="last name" />
        <input type="submit" />

    </form>
    <span>

    </span>

    <br />

    <input type="text" id="select1" placeholder="select event" />


</body>
</html>


No comments: