JavaScript Form Programming Summary

To manipulate the form, we first need to know how to get the form reference, which can be obtained in the following ways.

Get a reference to the form

before you start programming your form, you must first get the form <FORM>
1) using a typical dom id :
Var vform=document.getelementbyidx (" form1

2) You can also use the forms collection of document and form in form The location in the collection or the name attribute of the form to refer to :
var oform=document.forms[0];
var oform=document.forms["formz"];

Once we get the form, we can access the form's fields.

accessing form fields

Each form field,whether it's a button,text box or something else,are included in the form'sElementsin the collection.can use theirnameattributes or their location in the collection to access different fields:
Var Ofirstfield=oform.elements[0];
Var otextbox1=oform.elements["TextBox1"];
In addition, you can access fields directly by name,as:
Var Otextbox1=oform.textbox1;
If there is a tag in the name,You can use square brackets to mark:
Var otextbox1=oform["text Box 1"];

Common features of form fields

The following are all form fields(In addition to hidden fields)
Disabledcan be used to get or set whether the form control is disabled.
Formattribute is used to point to the form where the field is located.
Blur ()method causes the form field to lose focus.
Focus ()method to get the focus of a form field.
When the field loses focus is,happenBlurEvents,ExecutiononblurEvent Handlers.
When the field gets focus,happenFocusEvents,Executiononfocusevent handler function.

Submit Form
1 Submit a form using the submit button or submit image
For example:
<input value= "Submit" type= "Submit"/>
<input src= "submit.gif" type= "image"/>
When the customer clicks the above button will submit the form, if press ENTER, and there are these buttons, the browser will think that clicked the button

2 Get the form reference, then use the Submit () method
For example:
document.getElementById ("Form1"). Submit ();
To simulate a submit with a button:
<input value= "Submit" type= "button" onclick= "This.form.submit ();"/>

OnSubmit triggered when an event form is submitted
For example
<form onsubmit= "alert (' Submit '); >

Note: If you submit using the Submit () method, the submit event will not be triggered
Submit only once
Method: After the user clicks the Submit button, it is disabled
For example:
<input value= "Submit" type= "button" onclick= "This.disabled=true;this.form.submit ();"/>
Note: If you use the Submit Type button, it will cause the commit to fail because it was disabled before the form was submitted

list box, drop-down box object

List box object .options, get A collection of all option options

– listbox.options[0].text;// Get text

– listbox.options[0].value;// Get value

– listbox.selected;// Whether the option is selected

Multiple=multiple is set to multiple selections.

check boxes and radio button

U checked Property : Whether it is selected

U Click (): simulates a click, which triggers the click Event and changes the selection state.

U for check boxes, you can perform traversal operations.

the collection of check buttons ( equivalent to getelementsbyname ()) can be returned by the form object . Name value

Get/Change the value of a text box

Use document.getElementById to get an element object, then point to his Value property, modify or get the value of this element

Select text

Otextbox1.focus () Otextbox1.select ()

Automatically select text

Onfocus= "This.select ()": automatically selects text when the focus is obtained

Text Box Events

Both text boxes support Blur,focus,change and select events

Change event occurs after the user changes the value of a text box when the text box loses focus

The difference between the Select event and the Blur event:

The Blur event is triggered when the text box loses focus, and the change event is triggered when the text box loses focus, but only the blur event is triggered, and if the text is changed the change event is triggered first, followed by the Blur event

Access options
The HTML DOM defines the options collection for each <select/> element
Get <option/> display text and values:
General DOM Methods:
Olistbox.option[1].firstchild.nodevalue;
Olistbox.option[1].getattribute ("value");
HTML Dom Method:
Olistbox.option[1].text;
Olistbox.option[1].value;

The Index property represents the position in the options collection
For example: Olistbox.option[1].index; 1

The Length property represents the number of options
For example: oListbox.options.length;

Get/Change the selected item
Select
The index of the option selected by the SelectedIndex property (1 if not selected)
You can select multiple options in the list box when the multiple property is set to "multiple"
If more than one option is selected, SelectedIndex will contain the index of the first option

Option
The selected property indicates whether the option is selected
Get the index of all selected options by judging the selected property on the option loop

Add options
Add options with javascript:
1 Creating <option/> elements using DOM methods
var ooption = document.createelement ("option");
2 Create a text node and assign a name
Ooption.appendchild (document.createTextNode (sName));
3 Setting the value of an option
Ooption.setattribute ("value", svalue);
4 Add an option to the list box
Olistbox.appendchild (ooption);

Delete option
To delete an option with javascript:
1 The option to delete is set to null
OLISTBOX.OPTIONS[1] = null;
2 using the Remove () method, the parameter is the index of the option to be removed
Olistbox.remove (0);
Note: If you use a loop to delete multiple options, it is best to start with the largest index, since the index is reset after the delete

Move options
To move an option from one list box to another list box:
1 Get a reference to the option to move
var ooption = Olistboxfrom (IIndex);
2 Use the AppendChild () method in another list box to add this option, which is removed from the current list box
Olistboxto.appendchild (ooption);
Note: As with the delete option, if you want to move multiple options, it's best to start with the largest index

Reorder Options
Reorder options, including moving up and down:
1 Get a reference to the option to move
var ooption = Olistbox (IIndex);
2 to get the option to move the location
Move up: var oprevoption = olistbox.options[iindex-1];
Move Down: var onextoption = olistbox.options[iindex+1];
3 using the InsertBefore () method to reset the location
Move Up: Olistbox.insertbefore (ooption, oprevoption);
Move Down: Olistbox.insertbefore (onextoption, ooption);

Create a text box for automatic prompting

This text box examines the first few characters entered by the user, and then gives a list of help user input

Form validation:

form Validation is JavaScript one of the most common and useful features.

verify before the form content is submitted, reduce the pressure on server processing, and reduce the amount of time the user waits.

The first thing to consider in form validation is when to capture a form's entry error:

before the error occurs

When an error occurs

after the error has occurred

JavaScript Form Programming Summary