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"> </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.
Next: Processing the Form >>
More HTML Articles
More By Chris Root
