Home arrow HTML arrow Page 2 - Submitting a Form Using an Image Tag
HTML

Submitting a Form Using an Image Tag


There are a number of ways to make the forms on your website more user friendly. This article will explain one way of doing this, which eliminates a page reload and replaces it with an image generated on the server.

Author Info:
By: Chris Root
Rating: 5 stars5 stars5 stars5 stars5 stars / 25
April 18, 2005
TABLE OF CONTENTS:
  1. · Submitting a Form Using an Image Tag
  2. · Submitting a Form
  3. · Processing the Form
  4. · The Server Side Code
  5. · GD Methods
  6. · Handling the Name
  7. · The TextBox Class
  8. · From the Top

print this article
SEARCH DEVARTICLES

Submitting a Form Using an Image Tag - Submitting a Form
(Page 2 of 8 )

When a form is submitted, it can use either the default GET method or the POST method. The example that follows uses the GET method, and will show you how form values can be gathered and then sent via a query string without using the browser's built in form submission. Instead we will use an ordinary HTML image tag, which will display a graphic generated on the server. This graphic will serve as a replacement for a confirmation page, providing feedback to the user.

We start our journey in HTML land. The user is provided with a form for entering a contest on the left, and a promotional graphic to the right.

The form includes fields for the user's name and email address and a button to submit the form. The button can be a plain form button or it may be a standard "submit" type. If you use a submit button, the form can be submitted by pressing the enter key or clicking the button. However, in order to bypass the normal form submission process (normal submission may still be useful if the user does not have Javascript enabled), you will need to return a value of false to the form from the function you call with your onSubmit event.

<script language="Javascript">

function subfrm(fobj)

{

       if(!submitted)

       {

              notify = document.getElementById("d").childNodes[0];

              notify.nodeValue = "Please Wait While We Process Your Entry";

              var qstr = getFormValues(fobj,null);

              var imgObj = document.getElementById("status");

              imgObj.onload = thankYou;

              imgObj.src = "img.php?" + qstr;

              submitted = true;

       }

       else

       {

              alert("Sorry you cannot enter more than once."+

              " Thank you for entering.");

       }

return false;

}

</script>

<head>

<body>

<table border="0" cellpadding="4" bgcolor="#0022AA">

  <tr>

    <td align="right" valign="top">

      <form onSubmit="subfrm(this)">

<label>Name

<input type="text" name="name">

</label><br>

<label>Email Address

<input type="text" name="address">

</label><br>

<input type="submit" value="Enter Contest">

</form>

<div id="d">&nbsp;</div>

<p class="swptext">

Win the Sport Utility Vehicle of your dreams in the

<br><span>Win a Really Big SUV<br>Sweepstakes</span><br>

Enter now before it's too late!

</p>

<span class="ends">Contest Ends 4/1/2005</span>

</td>

<td>

<img id="status" src="images/splash.png" width="400" height="375">

</td>

</tr>

</table>

</body>

</html>

Notice that we are using the keyword "this" as an argument to the subfrm() function when submitting the form. Using this keyword we can pass a reference to the form object. How we use it will become clear later.

if(!submitted)

       {

              notify = document.getElementById("d").childNodes[0];

              notify.nodeValue = "Please Wait While We Process Your Entry";

In subfrm we first evaluate the value of the global variable submitted. This is initially set to false and enables the script to determine (on the client side only) if a contest entry has already been made by the user. If not, then a reference to the text inside the div with an id of "d" is stored, and the value of the text is changed to a message that tells the user that their entry is being processed.

var qstr = getFormValues(fobj,null);

The getFromValues() function is then called and passes the reference to the form, as well as either the name of a validating function as a string, or null if there is no validation needed. This function retrieves the form values, validates them if needed, and returns a properly encoded query string to append to a document path. We will look at this code in a moment.

              var imgObj = document.getElementById("status");

              imgObj.onload = thankYou;

Once we have our query string, a reference to the image tag on the page is stored, and an onload event is attached to it. An image tag triggers an onload event when the image is completely loaded. We can make use of this to let the user know that the server has processed the request, and they are entered in the contest.

There are two things to note about this code. One is that the event is in all lower case letters. This is the Javascript convention for events. The second thing to note is that our event handling function does not accept any arguments. When attaching events in this manner, this is an inevitable limitation.

              imgObj.src = "img.php?" + qstr;

              submitted = true;

       }

       else

       {

              alert("Sorry you cannot enter more than once."+

              " Thank you for entering.");

       }

return false;

The next line will begin the submission process. The query string is appended to the file path (in this example a PHP page), and set to be the new image source for the image tag in the document. The global variable submitted is then set to true.

At the end of the if construct, we take care of the eventuality that the user has already submitted the form. As mentioned before, we also need to return a boolean value of false to the form to prevent normal form submission. If you had used a plain form button to call this function, this would not be necessary.


blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials