With jQuery, you can help make it easier for the visitor to fill out an online form. This tutorial will show you haw to give hints as the user clicks in the boxes of a form. In a later tutorial, we will cover how to check if the information was entered in the proper format.

jQuery, if used from the client side where the users own browser runs the program, does not process the form and send the information to the server. You need something like PHP for that. jQuery however, can do things like give hints, check the format of the information and so forth. In many cases, if the format of the information is not correct, then it won't be stored correctly for use later on. We are referring to things like email addresses, dates, numerical information, etc.

This tutorial will use the jQuery API .focus(), .val(), .hide(), .closest() and .next()  methods and $(this).



Create a new document: tutorial-6.html

We will start out with the basic jQuery document that was created in Tutorial 1.

Open up the document called jquery-blank.html in a text editor and do a "Save As" into the same directory. Save the document as  tutorial-6.html.

Create the HTML elements

Inside of the <body>...</body> tags we are going to create a form with input fields.

Type the following into your open document:

            <td>First name: </td>
            <td><input type="text" id="firstName" class="aField"></td>
            <td> Enter legal first name</td></p>
            <td>Last name: </td>
            <td><input type="text" id="firstName" class="aField"></td>
            <td> Enter legal last name</td>
            <td>Age: </td>
            <td><input type="text" id="firstName" class="aField"></td>
            <td>Use this format: 35</td>

Style the HTML element

Let's add some styling to create the container to hold it all, the box for the visitor to click and then place the balloons out of sight. Above the closing </head> tag, you will see the <style type="text/css">...</style> section. Add the following:

<style type="text/css">
    body {font-family: Arial, sans-serif;background: url('/../sitegraphics/jqz-demo.jpg')}
    #container {padding: 10px;width: 500px; margin: 0 auto;background: #fff;}
    td:last-child {display: none;color: #cc0000; font-style: italic;font-size: 80%}

Add the jquery code

Go up to the <script>...</script> section in the <head>...</head> section. This is the section with $(document).ready() function already inserted.

<script type="text/javascript">
   });  // End document.ready()

Let's go thru the script step by step:


this step clears the input fields of class="aField" whenever the page refreshes. It uses .val(""); to assign the value to nothing if something was left in that input field.


this starts the functon when someone clicks inside one of the input fields of class="aField", this is the .focus() part of the script


what this does is change ALL the input fields of class="aField" to a light grey. If someone had already filled out the first box and has now clicked into the second box, we want the first box to go back to grey.


this step changes the background color of the box that received the action, $(this), to white, but leaves the other input boxes at grey.


this uses .hide() to turn off the display for all of the hints for the form, which were placed in the last column of the table that creates the form.


this uses the .next() method to go to the <td> after the element that was clicked, $(this), and uses the .show() method to style the <td> to display: inline, thus displaying it on the form.

A note about the logic of the script:

You need to reset all the fields, hints, etc. each time the user clicks into the next field, THEN you change the current information. 

Test the code

Save the document and open up a new browser window. Type the path to the document in the address bar of the browser. For example:


When you open up the document, you should see something like this.