Hack 67. Create a Web Form That Disappears When Submitted | Ajax Hacks: Tips & Tools for Creating Responsive Web Sites

Create a web form whose fields pulsate if the user has not filled them out; the form then scrams when the user submits it.

This hack creates a form that displays special effects. If a field is left blank when the user submits the form values, the field pulsates or flashes six times and displays a message. Once the user submits the completed form, the form pauses ever so briefly and then flees the page, leaving the server return value behind.

We'll look at the code that generates the effects in a moment, but first, here's the relevant part of the HTML for the page:

<head>     <meta http-equiv="content-type" content="text/html; charset=utf-8" />     <script src="/books/4/254/1/html/2//javascripts/prototype.js" type="text/javascript"></script>     <script src="/books/4/254/1/html/2//javascripts/scriptaculous.js" type=
    "text/javascript"></script>     <script src="/books/4/254/1/html/2//javascripts/disform.js" type="text/javascript"></script>     <title>form effects</title> </head> <body> <h3>Please Fill out the Form</h3> <div > <form action="javascript:void%200"> <p> <label for="tfield">Please enter your full name:</label>     <input  type="text" name="fname" size="25" maxlength="25" /> </p> <p> <label for="email">Email address:</label>     <input  type="text" name="email" size="25" maxlength="25" /> </p> <p> <button >Submit</button> </p> </form> </div>

The text fields labeled tfield and email are the potentially throbbing form elements. The div with id allform is the space containing the content that disappears when the code sends an Ajax request. Here is the code in disform.js, which uses a couple of script.aculo.us and Prototype objects:

window.onload=function(  ){     if($("tfield") && $("but1")){         $("but1").onclick=function(  ){             var _inputs = document.getElementsByTagName("input");             var bool=true;             for(var i = 0; i < _inputs.length;i++) {                 if (_inputs[i].type && _inputs[i].                         type.toLowerCase(  ) == "text" &&                         ! _inputs[i].value)  {                     Effect.Pulsate(_inputs[i].id);                     _inputs[i].value="[Please enter a value]";                     bool=false;                 }             }             if(bool){                 Effect.Puff("allform");                 new Ajax.Updater("msg","/hacks/proto",                         {insertion:Insertion.Top,                          parameters: Form.serialize(document.forms[0]),                         onComplete: function(request){                     if ((! request.status) ||                      (request.status > 400)) {                        $("msg").innerHTML="The server may be unavailable "+                        "for a moment; please try again soon.";                     }                 }});             }         };     }//end outer if };

When the user clicks the button on the form, the code iterates through each text field, determining whether the user has left any of them blank. If so, the code uses the script.aculo.us method Effect.Pulsate( ), passing in the id of the offending text field and making it flash. If everything is okay, Effect.Puff( ) causes the div and its child elements to vanish, leaving the server message in its place. The Puff effect is similar to the way the Roadrunner leaves Wile E. Coyote in its wake in the old cartoon.

The code uses the Ajax.Updater object from the Prototype library (see Chapter 6).

You have to make sure to import both the prototype.js and scriptaculous.js files into your web page to use these effects.

For more details on the Effect.Pulsate API, see http://wiki.script.aculo.us/scriptaculous/show/Effect.Pulsate.