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.
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.
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.
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.
imgObj.src = "img.php?" + qstr;
submitted = true;
alert("Sorry you cannot enter more than once."+
" Thank you for entering.");
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.