- Para ver cada ejemplo:
Haga clic en el enlace de abajo y cargar el ejemplo de esta ventana.
A continuación, para ver el código fuente:
Haga clic en el botón derecho del ratón sobre la ventana y seleccione "Ver código
fuente" de la ventana emergente.
Si alguno de los gráficos se utilizan en el guión:
Haga clic en el botón derecho del ratón sobre cada gráfico y seleccione "Guardar
imagen como" del menú emergente. (Todos los gráficos se incluyen en el mismo
directorio que el ejemplo de Javascript.)
Para volver al Indice:
Haga clic en el botón "Atrás" en la parte superior de su navegador.
|
|
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! |
Zip To State |
Enter your five digit zip code and press tab to have the script display
your state automatically |