Home arrow HTML arrow 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 / 22
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

TOOLS YOU CAN USE

advertisement
Submitting a Form Using an Image Tag
(Page 1 of 8 )

Forms on the Web are somewhat user unfriendly. One of the worst parts of using a form on a website is page reloads. Many times, after submitting a form, you are taken to a confirmation page, which provides links to go somewhere else rather then allowing you to submit the information and get on with your life.

This article will demonstrate a way to eliminate a step by getting rid of the confirmation page and replacing it with a simple image generated by the server. There are no page loads; just a little Javascript, server side code and an HTML "img" tag.

Image Generation

There are many server side Web application platforms that provide a way to generate graphics "on the fly" either built into the application language or via some sort of extension.

Most of these systems work with HTML in a very simple manner. Rather than using a path to an image in the src attribute of an image tag, the path to a coded page is used. This coded page (such as a PHP or ASP page) generates the graphics, assembles the proper HTTP headers and then sends the response as an image rather than an HTML document.

<img src="img_generate.php">

Many times this is used to display bar graphs, pie charts or other graphics assembled using information in a database.

Since we are sending the request to a Web application, there is nothing that says that we can't send more than just the path to the application.

In a standard GET style HTTP request (like a page request), a query string is used to send additional information to the server. A query string is made up of a "?" character followed by one or more name/value pairs separated by an "&", and encoded to escape characters such as spaces that are not allowed in URLs.

http://www.mydomain.com/products.asp?cat=lawnGard&subcat=lawmowers

A query string can be appended to any URL. As long as the target of the request is able to process and use the query string, then we have something useful. A static image of course has no use for query strings; a Web application can do quite a lot with one, however.


blog comments powered by Disqus
HTML ARTICLES

- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5
- BBC Adopts HTML 5, Mozilla Addresses Issues
- Advanced Sticky Footers in HTML and CSS
- HTML and CSS Sticky Footers
- Strategy Analytics Predicts HTML5 Phones to ...
- HTML5 Guidelines for Web Developers
- Learning HTML5 Game Programming
- More Engaging CSS3 and HTML Background Effec...
- Engaging HTML and CSS3 Background Effects
- More Web Columns with CSS3 and HTML
- Columns with CSS3 and HTML
- Creating Inline-Block HTML Elements with CSS
- Drag and Drop in HTML5: Parsing Local Files

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



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