javascripts
 

SimplytheBest
Scripts

ASP scripts
PERL scripts
PHP scripts
JavaScripts & Ajax
Snippets
Online scripts

Ajax, DHTML
& JavaScripts

Animation
Background
Bookmarks
Buttons
Calculators
Cookies
Data handling
E-mail
Enhancements
Forms
Image rotation
Menus
Messages
Miscellaneous
Music
Password protection
Redirection
Scrollers
Tables
Time & date
Windows

Publishers
Add script
Account login
Publisher list



 

Home > Scripts > DHTML scripts & JavaScripts > Forms > Graphic form buttons

 

Graphic form buttons

AUTHOR: Public domain
TYPE: Freeware
BROWSERS: Javascript enabled all

Easily add graphic buttons to your forms. This is a foolproof method to get rid of those ugly gray boxes.


EXAMPLE


 
Name:
Company name:
Address:
City:
Zip code:
Telephone:
E-mail:
Your query:
 


1)
Insert the following script between the </HEAD> and <BODY> tags in the page.

then copy (CTRL-C) & paste (CTRL-V)

2) Give your form a name, f.e. myform. Place this in every field value statement inside the script, like this

document.myform.Name.value = ""; and place it in the document.myform.submit statement.

3) For each field in your form (name, email, address, etc..) you must have or add a document.myform.FIELDNAME.value=""; statement. The total number of fields MUST MATCH the number of document.myform.xxxx.value statements in the script. If you get errors, check this!!

4) Insert the proper form action (change the URL to your form script) and name the form as below. The name must match all the names in the above mentioned statement inside the script. If you get errors, check this!!

<form method="POST" action="http://www.your_domainname.com/cgi-bin/your_mailform.pl" name="myform">
<input type="Hidden" name="subject" value="Comments on script">
<input type="Hidden" name="send-to-email" value="yourname@your_domain.com">
<input type="Hidden" name="redirect" value="http://simplythebest.net/thanks.htm">

The input statements differ depending on the form handler script you actually use on your server. If your script allows a Redirect URL and you include the statement, make sure you create a Thank you page.

5) Insert the graphics for the buttons in the right place. In HTML, add the <a href="javascript:Submit();"> for the Submit button graphic, and <a href="javascript:Reset();"> for the Reset button graphic as follows:

<a href="javascript:Submit();">
<img src="images/submit.gif" border="0" width="78" height="22"></a>
<a HREF="javascript:Reset();"><img src="images/clear.gif" border="0" width="78" height="22"></a>

Don't forget to close the <a href> statement with the </a>. The blue colored code in bold can or should be modified as is necessary. You can do a preliminary test by entering some information and clicking on the CLEAR button. If it clears, it means all is working fine.

Good luck with this great little script to enhance the way your forms look. For CGI scripts that handle forms, go to the SimplytheBest CGI Scripts Library.


[BACK] [TOP]

 


Copyright © 1997-2009 SimplytheBest Inc. Terms of Use and Legal Disclaimer.
All copyrights are acknowledged. All rights reserved.