Home arrow AJAX & Prototype arrow Using Ajax and jQuery with HTML Forms

Using Ajax and jQuery with HTML Forms

Being by far the most popular JavaScript framework available nowadays, jQuery generously honors its “write less, do more” motto. Seated on top of its already famous fluent API, the library provides a plethora of methods that allow you to perform many tasks, ranging from complex DOM and CSS manipulation, to handling events in a painless and straightforward manner.

TABLE OF CONTENTS:
  1. Using Ajax and jQuery with HTML Forms
  2. Validating User Data with jQuery, Ajax,
By: Alejandro Gervasio
Rating: starstarstarstarstar / 4
April 21, 2011

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

In addition, I could not forgive myself if I didn’t mention its Ajax module, one of the library’s most valuable gems, as it can be used for triggering and handling XHR requests, without having to swim in the troubling waters of browser incompatibilities.

Unfortunately, not all is so shiny and pleasant in the jQuery field. Due to the library’s flat learning curve and appealing features that it hides under the hood, it’s common to see a systematic abuse of it (even by highly-renowned web design companies with big pockets), especially when it comes to building dynamic user interfaces and performing form validation.

It seems that for some people, the use of Progressive Enhancement along with jQuery (or any other JavaScript library available out there) is mutually exclusive, something that is a misconception. Fortunately, there’s a bright side to this story: with careful planning, it’s simple to utilize jQuery without having to sacrifice a web site’s accessibility or compromise the level of security of an application.

To give you proof of my claim, I’ll be building a fully-customizable script, which will validate data entered in an HTML form via jQuery’s Ajax module. The data in question will be validated on the server side with PHP as well, regardless of whether or not JavaScript is disabled in the browser.

Getting started: building a sample contact form

Considering that my goal here is to demonstrate how to validate a web form using the jQuery/Ajax/PHP trio, the first step that must be taken is to create the target form. To fit this requirement, below I defined a basic (X)HTML document which includes a simple –yet functional contact form, where users can freely submit their inquiries.

The structure of this sample document looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Processing an HTML form with jQuery</title>
<link rel="stylesheet" type="text/css" href="css/base.css" />
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h1>Processing an HTML form with jQuery</h1>
        <h2>Header section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div>
    <div id="content">
        <h2>Contact form</h2>
        <form action="processform.php" method="post">
            <fieldset>
                <ol>
                    <li>
                        <label for="subject">subject: <em>[required]</em></label>
                        <input type="text" name="subject" id="subject" class="text" />
                    </li>
                    <li>
                        <label for="email">email: <em>[required]</em></label>
                        <input type="text" name="email" id="email" class="text" />
                    </li>
                    <li>
                        <label for="comments">comments:</label>
                        <textarea rows="10" cols="20" name="comments" id="comments"></textarea>
                    </li>
                    <li>
                        <input type="submit" name="send" value="Submit" />
                    </li>
                </ol>
            </fieldset>
        <div id="errors"></div>
        </form>
    </div>
    <div id="footer">
        <h2>Footer section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div>
</div>
</body>
</html>

As you can see, the pertinent contact form contains a few simple fields, which can be used for entering the subject of the inquiry, the user’s email address and finally some comments - nothing overtaxed. In addition, you should notice that the first two fields are required; don’t worry about this for the moment -as I said before, they’ll be validated later on using jQuery/PHP.

With this clean, semantic structure already set, the next thing that must be done is to define the visual presentation of the previous web page and the target form. Well, this will be accomplished with the following CSS file:  

(css/base.css)

/* layout and heading styles */
body {
    padding: 0;
    margin: 0;
    background: #000;
    font: 0.8em Arial, Helvetica, sans-serif;
    color: #fff;
}
h1 {
    font-size: 4.5em;
    text-shadow: 0 0 4px #3e1f00;
}
h2 {
    padding-bottom: 10px;
    margin: 0 0 30px 0;
    font-size: 3em;
    color: #ff8040;
    border-bottom: 1px solid #ff8040;
    text-shadow: 0 0 4px #3e1f00;
}
h3 {
    font-size: 1.5em;
    color: #fff;
}
#wrapper {
    width: 600px;
    margin: 0 auto;
    background: #773c3c;
}
#header, #content, #footer {
    padding: 20px;
}
/* form styles */
form {
    padding: 30px;
    background: #773c3c;
}
form fieldset {
    border: none;
}
form fieldset ol {
    list-style: none;
    padding: 0;
    margin: 0;
}
form fieldset ol li {
    margin-bottom: 10px;
}
form fieldset ol label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    text-transform: capitalize;
    color: #fff;
}
form fieldset ol label em {
    font-style: normal;
    font-weight: normal;
    color: #ff8040;
}
form fieldset ol input.text {
    width: 250px;
    border: 1px solid #ff8040;
}
form fieldset ol textarea {
    width: 250px;
    border: 1px solid #ff8040;
}
/* error messages */
.error {
    color: #f00;
}

The group of styles defined in the above file are fairly straightforward, so move on and take a look at the image below, which shows how the contact form looks after spicing up its appearance:

That looks quite good, considering that this is only an example. However, this is the boring part, trust me. With the sample contact form already defined and properly styled, it’s time to do something a bit more fun with it. But what? Well, as it was noted in the introduction, it’s necessary to validate the required fields and submit the form via Ajax.



 
 
>>> More AJAX & Prototype Articles          >>> More By Alejandro Gervasio
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

AJAX & PROTOTYPE ARTICLES

- Best AJAX Tutorials for Forms
- The Best AJAX Tutorials
- 8 Great Ajax Tutorials
- Using Ajax and jQuery
- Using Ajax and jQuery with HTML Forms
- Ajax.org Offers Cloud9 IDE for JavaScript
- Java Technologies Provider ICEsoft Releases ...
- Using Recaptcha in AJAX Prototype Framework ...
- Google's Closure Compiler Service API: Addit...
- Installing Google Web Toolkit: Introducing t...
- Google's Closure Compiler Service API: Displ...
- Google's Closure Compiler Service API: Deliv...
- Google's Closure Compiler Service API: the A...
- Google's Closure Compiler Service API: the S...
- Google's Closure Compiler Service API: Optim...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: