Home | | Internet & World Wide Web HOW TO PROGRAM | | Internet Programming | | Web Programming | Processing with onsubmit and onreset - 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 |

Processing with onsubmit and onreset - JavaScript(Js)

Two more useful events for processing forms are onsubmit and onreset.

More Form Processing with onsubmit and onreset

 

Two more useful events for processing forms are onsubmit and onreset. These events fire when a form is submitted or reset, respectively (Fig. 13.7). Function registerEvents (lines 35–46) registers the event handlers for the form after the body has loaded.

 

    <?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.7: onsubmitreset.html -->

 

    <!-- Demonstrating the onsubmit and onreset events. -->

 

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

 

    <head>

 

    <title>A Form Using onsubmit and onreset</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.",

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

"in the format user@domain.",

"Check this   box if you liked our site.",

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

"like us to   read.",

"This button submits the form to the " +

"server-side script.",

"This button clears the form.",

"" ];   

      function helpText( messageNum )

{

document.getElementById( "tip" ).innerHTML =

helpArray[ messageNum ];

} // end function helpText

      function registerEvents()

{

document.getElementById( "myForm" ).onsubmit    = function()

{        

return confirm( "Are you sure you want to  submit?" );

} // end anonymous function      

         

document.getElementById( "myForm" ).onreset = function() 

{        

return confirm( "Are you sure you want to  reset?" );

      } // end anonymous function

 

} // end function registerEvents

        // -->

 

        </script>

 

        </head>

 

        <body onload = "registerEvents()">

 

        <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.7 |  Demonstrating the onsubmit and onreset events.

Lines 37–40 and 42–45 introduce several new concepts. Line 37 gets the form ele-ment ("myForm", lines 51–70), then lines 37–40 assign an anonymous function to its onsubmit property. An anonymous function is defined with no name—it is created in nearly the same way as any other function, but with no identifier after the keyword func-tion. This notation is useful when creating a function for the sole purpose of assigning it to an event handler. We never call the function ourselves, so we don’t need to give it a name, and it’s more concise to create the function and register it as an event handler at the same time.

The anonymous function (lines 37–40) assigned to the onsubmit property of myForm executes in response to the user submitting the form (i.e., clicking the Submit button or pressing the Enter key). Line 39 introduces the confirm method of the window object. As with alert, we do not need to prefix the call with the object name window and the dot (.) operator. The confirm dialog asks the users a question, presenting them with an OK button and a Cancel button. If the user clicks OK, confirm returns true; otherwise, confirm returns false.

 

Our event handlers for the form’s onsubmit and onreset events simply return the value of the confirm dialog, which asks the users if they are sure they want to submit or reset (lines 39 and 44, respectively). By returning either true or false, the event handlers dictate whether the default action for the event—in this case submitting or resetting the form—is taken. (Recall that we also returned false from some event-handling functions to prevent forms from submitting in Chapter 12.) Other default actions, such as following a hyperlink, can be prevented by returning false from an onclick event handler on the link. If an event handler returns true or does not return a value, the default action is taken once the event handler finishes executing.

 

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


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