Forms

Here's a useful jQuery snippet that clears the default values of form fields on focus and refills them if no text is entered. It uses the attribute called defaultValue which stores the original value of a form field.

In forms when using text boxes or text areas with limited character length (usually needed for forms that submit data to a database) it is always a good idea to tell the user how many characters they have remaining. The following example shows how you can do this. This is a very simple and cute idea to help the user know exactly how many characters he can type further. Do these small add-ons to your forms and they will look really professional. This snippet is cross browser compliant - tested in IE, Opera, FireFox, Netscape & Safari...
(show more)
(show less)

If you're new to using JavaScript to access forms, this is the tutorial to read. You'll not only learn how to access forms, but validate them as well.

One of the big questions people have is how they can pass values from fields to others fields.

Attached is an example of how to cascade form values from one row to another. Previously I showed how to apply JavaScript cascades to check boxes, in this example we add the same functionality to drop downs and to text boxes.

A simple javascript validation code to check the user input and allow numeric data and disallow invalid characters

In this JavaScript Tutorial you will learn about JavaScript form object, properties of form object, action - elements[], encoding, length, method, name, target, button, checkbox, FileUpload, hidden, password, radio, reset, select, submit, text, textarea and methods of form object. ...
(show more)
(show less)

Creating a WYSIWYG textbox for your website is actually quite simple. Thanks to the html iframe component that contains the execCommand function, which enables us to access html tags in real time.

Here you have an example of how you can display and limit the number of characters an user can insert into an input or a textarea field.

Sometimes it is necessary to set the focus to the first available form control. The problem is that complex web pages can contain multiple forms and each form individually can contain hidden or disabled elements and controls that cannot accept focus. In this tutorial we will create a function which iterates through all forms until it finds the first available form control....
(show more)
(show less)

Any interactive web site has form input. If you run a validation of the user's form input before the form is submitted, there will be no wait time and redundant load on the server. "Bad data" are already filtered out when input is passed to the server-based program. It also allows to simplify server-based program. Client side form validation usually done with javascript. For the majority of your users, JavaScript form validation will save a lot of time up front....
(show more)
(show less)

This tutorial is about accessing form objects of the 3 standard ways via JavaScript.

Tutorial explaining how to use Ajax (Asynchronous Javascript and XML) to create a drop-down 'suggest' box for form fields which updates as you type by querying the server in the background. Similar to the 'Google Suggest' application. Full tutorial, code snippets and further reources. And it's free, of course....
(show more)
(show less)

This tutorial explains how to change a select element's content using JavaScript, from adding new options to modifying and deleting them. It also shows how to create a 2 level interdependent select list.

In this article, I'll explain demonstrate the fundamental steps to creating an Ajax form. In this demo, there are two files, one is index_demo.php and the other is add_url_demo.php

In forms when using text boxes or text areas and check boxes you might need a reset button that is not the usual gray HTML button. For this you can use a small JavaScript function as given below. Note: This button will reset only text boxes,text areas and check boxes as list boxes and option buttons don't usually require resetting. After resetting the form the cursor will set the focus to the first field in the form....
(show more)
(show less)

Javascript code that automatically fills in the address in all places needed on the page after just once entering it and selecting the check box.

Got a submissions form that you keep getting multiple submissions from? I've found that in most cases its because people are impatient and click the submit button repeatedly until they get a response. The unfortunate result is that you receive multiple copies of the same form. This little bit of JavaScript disables the submit button as soon as it is clicked for the first time and prevents the user sending their form multiple times. Script now also changes the text on the button to 'Thanks' (this can be modified to suit)...
(show more)
(show less)

Complete listing of the Form object of JavaScript and its properties/methods. Also includes additional pages describing objects beneath Form, such as TEXTAREA, SELECT etc.

Let us say that we have a form with two select options. We want one to change when we change the value of other. Follow the steps to do it yourself