Home | | Internet & World Wide Web HOW TO PROGRAM | | Internet Programming | | Web Programming | Form Processing with onfocus and onblur - JavaScript(Js)

Chapter: Internet & World Wide Web HOW TO PROGRAM - The Ajax Client - JavaScript: Events

| Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail |

Form Processing with onfocus and onblur - JavaScript(Js)

The onfocus and onblur events are particularly useful when dealing with form elements that allow user input .

Form Processing with onfocus and onblur

 

The onfocus and onblur events are particularly useful when dealing with form elements that allow user input (Fig. 13.6). The onfocus event fires when an element gains focus (i.e., when the user clicks a form field or uses the Tab key to move between form elements), and onblur fires when an element loses focus, which occurs when another control gains the focus. In lines 31–32, the script changes the text inside the div below the form (line 58) based on the messageNum passed to function helpText (lines 29–33). Each of the ele-ments of the form, such as the name input in lines 40–41, passes a different value to the helpText function when it gains focus (and its onfocus event fires). These values are used as indices for helpArray, which is declared and initialized in lines 17–27 and stores help messages. When elements lose focus, they all pass the value 6 to helpText to clear the tip div (note that the empty string "" is stored in the last element of the array).

    <?xml version = "1.0" encoding = "utf-8"?>

 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

    <!-- Fig. 13.6: onfocusblur.html -->

 

    <!-- Demonstrating the onfocus and onblur events. -->

 

    <html xmlns = "http://www.w3.org/1999/xhtml">

 

    <head>

 

    <title>A Form Using onfocus and onblur</title>

 

      <style type = "text/css">

 

.tip { font-family: sans-serif;

color: blue;

font-size: 12px }

      </style>

 

      <script type = "text/javascript">

      <!--

 

var helpArray =

[ "Enter your name in this input box.", // element 0

"Enter your   e-mail address in this input box, " +

"in the format user@domain.", // element   1

"Check this   box if you liked our site.", // element 2

"In this box, enter any comments you would " +

"like us to   read.", // element 3   

"This button submits the form to the " +  

"server-side script.", // element 4  

"This button clears the form.", // element 5

"" ]; // element 6

      function helpText( messageNum )

{

document.getElementById( "tip" ).innerHTML =

helpArray[ messageNum ];

      } // end function helpText

      // -->

 

      </script>

 

      </head>

 

      <body>

 

      <form id = "myForm" action = "">

 

      <div>

 

      Name: <input type = "text" name = "name"

      onfocus = "helpText(0)" onblur = "helpText(6)" /><br />

 

      E-mail: <input type = "text" name = "e-mail"

      onfocus = "helpText(1)" onblur = "helpText(6)" /><br />

 

      Click here if you like this site

 

<input type = "checkbox" name = "like" onfocus = "helpText(2)" onblur = "helpText(6)" /><br /><hr />

      Any comments?<br />

 

      <textarea name = "comments" rows = "5" cols = "45"

      onfocus = "helpText(3)" onblur = "helpText(6)"></textarea>

 

      <br />

 

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

              "helpText(4)" onblur = "helpText(6)" />

<input type = "reset" value = "Reset" onfocus =

        "helpText(5)" onblur = "helpText(6)" />

 

        </div>

 

        </form>

 

        <div id = "tip" class = "tip"></div>

 

        </body>

 

</html>



Fig. 13.6 | Demonstrating the onfocus and onblur events.


Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail


Copyright © 2018-2020 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.