To see each example:-
Click on a link below and load the example in this window.
Then to view the source code:-
Click the right mouse button over the window and then select "View Source" from the pop-up window.
If any graphics are used in the script:-
Click the right mouse button over each graphic and then select "Save Picture As" from the pop-up menu. (All of the graphics are included in the same directory as the javascript example.)
To go back to the Index:-
Click on the "Back" button at the top of your browser.
Accept Terms This Script allows your visitors or customers to accept your terms and conditions before proceeding by ticking a Check Box. If they don't agree, an exit box on the form takes them back to the home page.
Agree Before Entry JavaScript will only let you enter your name in this form if you indicate you agree to the terms by first clicking the I Agree radio button. If you agree, you can enter your name. But, if you disagree, you will not be able to enter or edit your name. When you disagree, the box is 'locked.' Useful if you require your visitors to accept a disclaimer before downloading software or visiting a section of your members-only site.
Aim Message Send messages to anyone using AOL Instant Messenger.
All Lower Case Converts a textbox entry to all lowercase letters as soon as they move to the next item in the form (or click the submit button).
All Upper Case Converts a textbox entry to all capital letters as soon as they move to the next item in the form (or click the submit button).
Anywhere Mail Use this script to allow visitors to mail anyone, at any time.
Auto Currency Inserts the proper separators to automatically format any currency field.
Auto Drop Down Automatically adjusts the values in the selection box depending on the item selected in the drop down menu.
Auto Month This pulldown menu will automatically adjust the range of months so that the current month is at the top. The remaining months are placed in order after the current month.
Auto Tab Automatically sets focus to the next form element when the current form element's maxlength has been reached. This way, the user does not have to manually click in or tab to the next field. This script is perfectly suited for constant-length strings such as a phone number or social security numbers.
Auto Year This pulldown menu will automatically adjust the range of years depending on the current year. As an added bonus, the range is easily modified.
Basic Validation The simplest way to require visitors to fill out certain fields is to us this script - just add the word "required" to each required field's name and your visitor must fill it out to submit the form!
Block Key Press (Internet Explorer Only) Using the OnKeypress event, you can trap and prevent certain characters (repesented by ASCII decimal codes) from being entered in a form field. Just look up the ASCII code for any other characters you wish to block and add it to the script. Unfortunately, Netscape does not support this same functionality.
Check Form This form validation script will place a check in the checkbox next to a textbox in a form if the enty is valid. Includes basic form validation.
Check Entry Prevents the user from selecting a filename with a space (known to cause problems with some CGI-scripts). The visitor are informed that the field can not have spaces. Of course, you could change the character it checks for as well as the invalid alert message to something else to suit your needs.
Checkbox Counter Easily count the number of checkboxes that have been selected.
Checkbox Text (Internet Explorer Only) The user no longer needs to click precisely on the checkbox to check and uncheck it. Clicking the text after a checkbox can do this just like windows programs.
Checkbox Changer Takes a series of known named checkboxes and checks or uncheck them all at once. It can even change each checkbox to the opposite checked or not checked value.
Commas Quickly add commas to any numerical form input. Great for displaying large numbers!
Confirm Order JavaScript can take the contents of an HTML order form, process them, and display the order for verification even including the grand total! When the user confirms the order by clicking the button, the order is emailed to you by using freedback.com's free form processor cgi script. This script does take a bit of modification, but surely is worth it if you sell anything online.
Confirm Order 2 Part 2 of the Confirm Order script.
Confirm Order 3 Part 3 of the Confirm Order script.
Controlled Boxes This script allows checkboxes to check and uncheck based on the selection in another checkbox. If the ALL box is checked, all the other choices go unchecked. If another choice is checked, then the ALL box goes unchecked. Useful when constructing search forms, surveys, and more!
Copy Fields Allows the user to click a checkbox on a form to duplicate information. For example, they can copy their billing information into the shipping information fields (assuming they are the same) with one click!
Copy Name Allows the user to enter their name in the first field and have copies it to the second field for use as the User ID. It occurs instantly when they click the next field or the submit button. And, if the user tries to modify the second field, it is changed back to the value of the name field. Definitely a good example of the onChange() event handler in use.
Country If you'd like to know where visitors to your site live, add this to your feedback forms. They just choose a region, and the second menu changes appropriately, allowing them to choose their country. (If they choose USA, it allows them to select their state)
Currency Format This script accepts a number or string and formats it like U.S. currency. Adds the dollar sign, rounds to two places past the decimal, adds place holding zeros, and commas where appropriate. Occurs when the user clicks the button or when they finish entering the money amount (and click into the next field).
Day Menu Do you need your visitors to select a day from this month? Here's an excellent way to do so - they get a pulldown menu containing the entire month and the current day is already selected!
Decimals Allowed Allows the user to enter a number with up to 2 decimal places in a text box. In other words, 99 is ok, 99.9 is ok, 99.99 is ok, but 99.999 is rejected. You can easily change the number of decimal places that are permitted. (i.e. 1, 2, 3, etc.) For the example, enter a number with up to 2 decimal places then try entering one with more than 2 decimal places.
Disable Submit (Internet Explorer only) When the form is submitted, any submit and reset buttons are disabled. This prevents the user from submitting the form repeatedly, whether by accident or on purpose. The form will just act normally for Netscape users.
Dynamic Table (Internet Explorer 5+ and Netscape 6+ Only) Enter information into this dynamic table and see the power of W3C-DOM compatible browsers.
Dynamic Input (Internet Explorer Only) Offer a form with as many input boxes that the user selects. After entering the number of boxes, the form is dynamically updated while the rest of the form remains untouched.
Email Domain Takes an email address and returns just the domain - the stuff after the "@" sign. We've put it together with a simple WHOIS query.
Email Validation Basic This is a simple e-mail address validation script. While it is not too sophisticated, it does provide the basic validation function.
Email Address Validation This is an e-mail address validation function. It allows the usual user@domain syntax, but in addition allows user@[ip] format as well as "User with Spaces"@domain or [ip], all of which are legal syntax, according to W3C. It also checks that the user hasn't done anything silly like having multiple @'s or continuous .'s in the address (e.g. jim@b@c.com and jim@c..b.co.uk).
Encode Special Characters When submitting the form "GET" method, JavaScript can encode special characters with the escape() function. Great! (Enter a nickname or password with some special variables then click 'submit' to see the web address which contains the encoded (%xx) characters.)
Expanding Textbox Automatically expands the size of a textbox to fit all of the entered text. Internet Explorer Only.
Extended Characters Having trouble remembering the extended character codes? It's now as easy as a press of a button.
Extract Email Visitors sometimes include their email address inside the message field when they fill out forms. To deal with this, this script parses through the string and uses a Regular Expression to find then return a comma-separated list of the valid email addresses it finds.
Field Explanation Opens an explanation window to explain the various fields used in a form on your site when the help link is clicked. You can easily explain various form fields will be used on your site, what type of input is required, or any other information you wish to share. They may also type their entry in the popup window and it will be copied into the form.
File Open This script allows someone to choose a file on their hard drive and open it. Now cross-browser compatible.
First Form Field This script places the cursor in the first field of a form when the page loads and when the form is reset or cleared. The script works with input types: text, textarea, radio, checkbox, password and Select drop-down boxes.
Form Focus Places the focus on the first editable field in a form on any web page.
Form Swapper 2 Move selected items from one list box to another using "<<" and ">>" direction buttons. It works like database field selection, supports selecting multiple items, and even can sort the moved item into the new list. Newly modified, more efficient algorithm!
Form Totals Presents an order form with checkboxes and upates the total price as the user checks and unchecks boxes. The visitor also cannot change the total field. Currently only supports selecting one of each item.
Form Target Formatting Allows you to format the target window of a form from the form's target property. This allows for the use of window properties, variables, and other data manipulation to effect these options.
Format Input Format the text case inside a form, reverse the text, or see the ASCII code behind the input.
Format Date Automatically formats date fields as the user enters the information. Also validates the date when complete date has been entered. Cross browser compatible, including Netscape 6+.
Htm Preview Preview HTML in a new window by entering it into the form. This script allows you to pass anything to a new window.
Ignore Spaces Removes spaces from a string variable within a script or from user input into a text box. Several different uses are shown on the script example page.
Initial Caps Converts the first letter of each word in a string that the user enters to uppercase. The remaining letters of each word are also changed to lowercase. Very useful when a form requires a title to be submitted in Initial Caps.
Items Popup List If you have several items for the user to pick from, you may notice that your page can quickly becomes cluttered. This script helps solve that problem by opening a new window when the user wants to add items to the list. The new window displays the items and passes the selected item information back to the list in the main window.
Items List Javascript can remember a list of several items you enter. Just enter an item and click 'Add to List'. When you are finished, click 'Show List' to see the entries.
Limit Textarea This script controls a maximum textarea input amount and updates a small counter with how many characters are left with each keystroke. Dynamic fix now allows you to use this script in multiple textboxes on a page.
Limit Boxes Limits the number of checkboxes that the user is able to check on your site. Ideal for situations when more than one selection is allowed up to a certain number overall. If they select too many, they are notified of the maximum allowed and their last entry becomes unchecked.
Line Wrapper Wraps entries in a textarea box to whatever number of characters per line you want. For example, The script can automatically insert a return after each 50 spaces, so that the form contents you receive are more readable. (The script does indifferently break lines in mid-word, a possible fix for the next version?)
List Chooser The user can immediately locate what he has been searching for in the long options list just by typing. With each character the user types in the text field, the available items listed are narrowed down (similar to a help file's index feature). (Start by entering an 'a' to narrow the list)
List Organizer Easily organize a list of values to place them in any order. Allows you to add and delete from the list!
Locked Textbox Prevent your visitors from modifying the value stored in a textbox (without using input type=hidden) Just try to change the text in the box! Amazingly, it's a short less than one line script!
Mail Pick Subject Use Javascript to help organize your visitor e-mail. Visitors pick from several predetermined subjects the most appropriate subject for their e-mail. Visitor are also prompted to reenter information for incomplete or invalid entries. A cookie also records the visitor's name for future e-mails.
Mailing List Use Javascript to sign up visitors for your mailing list. Once again, Javascript ensures that the visitors have filled out the form completely and correctly. Visitors area also prompted to reenter any incomplete or invalid entries.
Max Entry Make sure your visitor doesn't exceed the maximum number of characters that you want to accept in a form. Short too!
Memory Cells Need to save values from a text field off to the side to free up a form for another calculation? This JavaScript lets you do just that!
Money Filter Removes the dollar sign ($) and commas (,) from a a text box. Useful if you require input of only numbers. You may also modify the script to filter out whatever characters you want.
Multiple Mailer JavaScript can help you send an e-mail to anyone on your "list". Just use the pulldown menu to select a recipient, compose your message, and hit 'Send Message' to send it.
No Duplicates Prevents you from selecting the same choice when choosing from two different pulldown menus.
No Entry Use Javascript to ensure that visitors do not leave a form entry blank
No HTML Use Javascript to ensure that visitors do not type in HTML entries.
Only One Field The visitor must fill in either one of two fields, their name or email address. If they click in either box the other box's value is erased. Ensures that when the form is submitted only one field contains a value. Also contains validation that makes sure both fields are not empty.
Open Window Use Javascript to allow visitors to open a customized window.
Option Search Allows you to jump to any value in a drop down list. In our example, search for a value between 'a1' and 'a15'. Saves time when it comes to navigating within long pull down menus.
Pass Menu Frames After the user selects an option in the pulldown menu in the left frame, JavaScript can pass that option's value into a text box in the right frame when the button is clicked.
Pass Textbox Frames Copies the text in a box in the left frame into a box in the right frame when the button is clicked. A clever way to pass values in frames.
Password Verifier Keep your visitors from submitting their form until their "password" and "re-enter password" fields match, for verification purposes. They get an error message telling them to re-enter the passwords if they do not match.
Quantity Totals : (Best with Internet Explorer) Update to our Form Totals Script. Allows you to enter a quantity of each item selected and finds the total automatically.
Radio Totals (Best with Internet Explorer) Select items in this totals form using checkboxes and radio buttons.
Remove Returns Converts carriage returns in a string to the tag so that the input can be properly displayed in HTML. Without the script, returns in an input field are not preserved when submitting in a form. Useful for guestbooks or other times when a user's input must be preserved.
Replace Characters Replaces a character or multiple characters in a textbox when the visitor goes to the next field (or in this example, clicks the submit button).
Required Fields Checks form fields to verify that each specified field is not left empty. Displays a warning message if any empty fields are present.
Search Box This JavaScript search form opens a seperate window where you can select from search engines such as Yahoo!, Excite, and more.
Selection Box Copy items from one selection box to a second selection box. Selected item values are stored as a string for further manipulation, such as submitted through a form, an alert box, etc.
Selection Order Adjust the order of the items in a selection box and submit them in that order.
Select One Limits the number of checkboxes a user may click by deselecting the others upon selection.
Select All Select the text from any form with the click of a button, just as used on the JavaScript Source.
Sentence Caps Use Javascript to convert entries to sentence caps. Also, this script prevents jokers from typing in all caps.
Smart Pulldown Menu Uses cookies to let a dropdown list remember which option was chosen when a user returns to the page. It comes in very handy if you have a page that is frequently accessed and users tend to repeatedly chose the same option from a list.
Smut Engine Use Javascript to ensure that forms submissions to do not contain words you don't want. It can eliminate dirty words or competitors' names.
Spaces To Plus Replaces single or multiple spaces in a text box entry with plus (+) symbols. Handy if your server's form processing or database management program requires this type of encrypted format.
Strip Characters Strips the characters from an input string. You can change the characters you want removed from the string by changing one line of code.
Submit Link Now you can easily use text or an image as a submit button!
Submit Once Do you ever receive multiple copies of a single form submission? Do your visitors click the submit button over and over, hoping it will hurry up the process? Well, JavaScript can solve your problems! The script will prevent the visitor from submitting the form after the first submission. Basic field validation also included!
Submit Changer Changes the caption of the form's submit button while the form is being submitted. This helps eliminate the confusion that can sometimes occur when a form takes quite a while to be processed by the server.
Suggestions Use Javascript to allow visitors to send your feedback.
Tab Key Emulation The tab key is no longer required to tab between fields. The user can go to the next form field just by pressing the enter key instead of the tab key. Useful with 10-key form input.
Text Cycler Use the Up and Down arrows while in the text box to cycle through your choices. InternetExplorer users can go up and down through the list, Netscape users can only go down through the list.
Text Reverser JavaScript will take the contents of a box and reverse it! If you entered 'hello' it will change the box to say 'olleh'. This might be useful on your site in a form or just for fun.
Time Out Limit the time allowed for form input with this short script.
Trim Leading Spaces A super-easy script which eliminates any extra leading spaces entered inside a textbox. To check it out in action, try entering a few spaces before the text in the box.
Trim Trailing Spaces A super-easy script which eliminates any extra trailing spaces entered inside a textbox. To check it out in action, try entering a few spaces after the text in the box.
True Date Selector This script helps to insure the integrity of the date entered in drop-down menus. Dates, such as Feb 31st can't be selected. Today's date is automatically selected.
Upload Filter Allowing visitors to upload files through web forms on your site is useful, but how do you limit the types of files they can upload? This script only allows visitors to upload files that end with the file extensions you want, such as .gif and .jpg, etc.
Val Char Automatically removes specified characters from input box. Good for fields that require only text/number inputs. Easily modified to accept only text or only numerals.
Val Cookie Use Javascript to ensure that all elements of a form are properly filled out before mailing.
Val Credit Card Determines if a credit card number is valid before the form is submitted by utilizing the LUHN formula. Very simple, and does not require knowledge of the credit card type. Does not check if the date is valid. Ver useful for online order form validation.
Val Date Dates are validated and formatted in your form. Supports over a dozen different date formats, and formats the date properly in United States or European date formatting styles depending on how the script is configured. A dateCheck function also is included if you wish to compare two dates.
Val External Js Using an external JavaScript file, simply define the rules for how each field should be validated and you're set. Piece of cake! And since it is it's own .js file, it's easy to use the code on every page of your site. Currently only validates text, numbers and e-mail addresses.
Val Guestbook Use Javascript to ensure that all elements of a form are properly filled out before mailing.
Val Info Test the powers of Javascript. Watch as Javascript tells you if information about you is valid or not.
Val Ip Verify the value of an IP address. Check for special cases such as "0.0.0.0" and "255.255.255.255".
Val Num Or Char Validates an input field to make sure that only a number or character is entered. If you enter a number or a letter everything you can continue on. But, try entering another value like an exclamation point (!), an ampersand (&), or a dollar sign ($) and see what happens. It even highlights the incorrect entry field for you.
Val Pass This script works like our Password Verifier, however, it also checks for a minimum length and invalid characters.
Val Selection Use Javascript to ensure that visitors choose both a radio button and a checkbox. Invalid submissions are cancelled.
Val Ssn Input the Social Security Number using either the 9 digit or NNN-NN-NNNN format. The number ranges can be easily changed by the S.S.A, so this is not checked.
Val Time This function verifies that a string is a valid time, in the form hh:mm:ss am/pm, where seconds are optional. It accepts military time (hour between 0 and 23) as long as am/pm isn't specified. It requires am/pm when the hour is less than or equal to 12.
Val Zip Code Ensure that your visitors enter a properly formatted 5 digit, or 5 digit+4 zip code. The visitor is alerted if any information is invalid and asked to try again.
Validation Universal Date Validate dates in your form using this universal script. Will work with any date format and the code is fully commented for easy modification.
Validation Let Javascript help you receive feedback from your visitors. The script also requires that all fields must be completed before the form is submitted.
Word Counter This is a handy script that counts the words (or characters) entered into a textarea and limits it to 100 words or less (this can be changed).
Word Count Finally, an easy way to count the number of words that are entered into a form!