Introduction to JavaScript Form Events
Users से किसी भी प्रकार की information प्राप्त करने के लिए forms बहुत ही important होते है। एक form कई elements से मिलकर बना होता है जैसे की text-boxes, buttons, checkboxes, radio buttons आदि। Forms के द्वारा कई प्रकार के events generate होते है।



Javascript में common form events की list निचे दी जा रही है।


  • onblur - When an element loses focus.



  • onchange - When state of an element changes.



  • onfocus - When an element gains focus.  



  • onfocusin - Occurs before an element gains focus.



  • onfocusout - Occurs before an element loses focus.



  • oninput - When user gives input or makes changes



  • oninvalid - When input entered by user is invalid.



  • onreset - Occurs when form is reset 



  • onsearch - When user search for a term



  • onselect - When text is selected from an element



  • onsubmit - When a form is submitted


    • Forms के द्वारा generated इन events को handle करके आप forms को और भी interactive और dynamic बना सकते है। इन सभी events के बारे में निचे detail से दिया जा रहा है।



    onblur 

    जब किसी element से focus हटता है तो उस element पर onblur event generate होता है। उदाहरण के लिए मान लीजिये 2 text boxes है। जब user एक text box में value type करने के बाद दूसरे text के अंदर click करता है तो पहले वाले text box में ये event generate होगा।



    ऐसा इसलिए होगा क्योंकि focus उस textbox से हट गया है। इस event को आप कई प्रकार से use कर सकते है जैसे की आप textbox के text का color change कर सकते है। इसका उदाहरण निचे दिया जा रहा है। 

    <html>



    <head>

    <title>onblur Demo</title>

    <script>

    function blurFunction(inputtext)

    {

       inputtext.style.color="red";

    }

    </script>

    </head>



    <body>

    When you click outside of this box it's text will become red.<br />

    <form>

    <input type="text" onblur="blurFunction(this)">

    </form>

    </body>

    </html>


    ऊपर दी गयी script निचे दिया गया output generate करती है।



    onchange

    जब किसी form element की state में कोई change आता है तो onchange event generate होता है। जैसे की यदि किसी drop down list में से कोई different item select किया जाता है तो उसकी state change हो जाती है और onchange event generate होता है।



    इसका उदाहरण निचे दिया जा रहा है। 

    <html>

    <head>

    <title>onchange Demo</title>

    <script>

    function changeFunction(selection)

    {

        alert("An option was selected.");

    }

    </script>

    </head>



    <body>

    <form>

    <select onchange="changeFunction()">

    <option value="One">One</option>

    <option value="Two">Two</option>

    <option value="Three">Three</option>

    </form>

    </body>



    </html>


    ऊपर दी गयी script निचे दिया गया output generate करती है। 


    onfocus

    जब आप किसी element से interact करते है तो वह element focus में आता है। जब कोई element focus में आता है तो onfocus event generate होता है। जैसे की यदि value input करने के लिए आप किसी textbox में click करते है तो उस textbox पर onfocus event generate होगा।



    इसका उदाहरण निचे दिया जा रहा है।



    <html>

    <head>

    <title>onfocus Demo</title>



    <script>

    function focusFunction(inputtext)

    {

         inputtext.style.color="blue";

    }

    </script>



    </head>



    <body>

    <form>

    <input type="text" onfocus="focusFunction(this)">

    </form>

    </body>



    </html>


    ऊपर दी गयी script निचे दिया गया output generate करती है। 



    onfocusin & onfoucsout 

    किसी element के focus में आने से पहले onfocusin event generate होता है। ऐसा कोई भी task जो आप किसी element के focus में आने से पहले करना चाहते है तो उसे onfocusin event द्वारा handle कर सकते है।



    जैसे की आप किसी element के focus में आने से पहले document के बाकी color का text change कर सकते है या फिर document का background color change कर सकते है।



    किसी element से focus हटने से पहले onfocusout event generate होता है। कोई भी task जो आप element से focus हटने से पहले perform करना चाहते है इस event द्वारा handle कर सकते है।



    इन दोनों events का complete उदाहरण निचे दिया जा रहा है। 

    <html>

    <head>

    <title>onfocusin</title>

    </head>

    <script>

    function focusinFunction()

    {

        document.bgColor="black";

        document.body.style.color="yellow";

    }

    function focusoutFunction()

    {

        document.bgColor="white";

        document.body.style.color="black";

    }

    </script>

    <body>

    <form>



    <form >

    Enter your name :<input type="text" onfocusin="focusinFunction()" onfocusout="focusoutFunction()">

    </form>

    </body>



    </html>


    ऊपर दी गयी script निचे दिया output generate करती है। 


    oninput

    जब किसी element का content user interaction द्वारा change होता है तो उस element पर oninput event generate होता है। आसान शब्दों में कहा जाए तो जब user द्वारा input दिया जाता है तो oninput event generate होता है। इस event के generate होने पर आप कई प्रकार से action ले सकते है।



    इसका एक उदाहरण निचे दिया जा रहा है। 

    <html>

    <head>

    <title>oninput Demo</title>

    <script>

    function inputFunction()

    {

         document.getElementById("message").innerHTML="User typing......";

    }

    </script>

    </head>



    <body>

    <form oninput="inputFunction()">

    Enter some text <input type="text">

    </form>

    <p id="message">Type some thing in above text box</p>

    </body>



    </html>


    ऊपर दी गयी script निचे दिया गया output generate करती है। 



    oninvalid 

    जब किसी element के लिए input की गयी value invalid हो तो उस element पर oninvalid event generate होता है। उदाहरण के लिए यदि किसी required form field में user value input ना करे तो ये event generate होगा। इस event को handle करके आप user को appropriate message show कर सकते है।



    इसका उदाहरण निचे दिया जा रहा है। 

    <html>

    <head>

    <title>oninvalid Demo</title>

    </head>



    <body>

    <form>

    <input type="text" oninvalid="alert('Please fill the form');" name="name"  required>

    <input type="submit" value="Submit">

    </form>

    </body>



    </html>

    ऊपर दी गयी script निचे दिया गया output generate करती है। 


    onreset

    जब किसी form को reset किया जाता है तो onreset event generate होता है। Form को reset करने पर form के सभी elements initial values पर set हो जाते है। इस event के generate होने पर आप user को कोई message show कर सकते है या फिर कोई और action भी ले सकते है।



    इसका उदाहरण निचे दिया जा रहा है। 

    <html>

    <head>

    <title>onreset Demo</title>

    </head>



    <body>

    <form onreset="alert('Form is being reset..')">

    Enter some text : <input type="text"> <br />

    <input type="reset">

    </form>

    </html>


    ऊपर दी गयी script निचे दिया गया output generate करती है।




    onsearch

    जब search input field में user कुछ text type करके search करने के लिए enter press करता है तो onsearch event generate होता है। इस event के generate होने पर आप कोई message show कर सकते है या user को किसी url पर redirect कर सकते है।



    इसका उदाहरण निचे दिया जा रहा है। 

    <html>

    <body>



    <input type="search"  onsearch="searchFunction(this)">



    <script>

    function searchFunction(inputtext)

    {

       document.write("You have searched for : "+inputtext.value);

    }

    </script>



    </body>



    </html> 


    ऊपर दी गयी script निचे दिया गया output generate करती है। 


    onselect

    जब किसी form element में से text select किया जाता है तो onselect event generate होता है। इस event के generate होने पर आप कोई भी action ले सकते है जैसे की कोई message show कर सकते है या फिर text का background color change कर सकते है। इसका उदाहरण निचे दिया जा रहा है।

    <html>

    <head>

    <title>onselect Demo</title>

    </head>



    <body>

    <p> Select text inside textbox</p>

    <input type="text" value="Hello World!" onselect="alert('Text selection is disabled.');">

    </body>



    </html>


    ऊपर दी गयी script निचे दिया गया output generate करती है। 



    onsubmit

    जब user के द्वारा submit button click करके कोई form submit किया जाता है तो form element पर onsubmit event generate होता है। इस event पर आप कई प्रकार से actions ले सकते है जैसे की आप form validation perform कर सकते है।



    इसका उदाहरण निचे दिया जा रहा है। 

    <html>

    <head>

    <title>onsubmit Demo</title>

    <script>

    function submitFunction()

    {

        alert("Your application have been submitted.");

    }

    </script>

    </head>



    <body>

    <form onsubmit="submitFunction()">

    Enter your name :<input type="text" name="Name">

    <input type="submit">

    </form>

    </body>



    </html> 

    ऊपर दी गयी script निचे दिया गया output generate करती है।