JavaScript Action Form

In addition to using all of the DOM-related operations described above, the form element has its own set of properties and methods to simplify.

In addition to supporting mouse, keyboard, change and HTML time, forms also support some form-specific events, such as Focus,change,blur and so on.  

Form elements of a form

1. Get the form element on the form

1) document.getElementById ()

2) document.forms can get all form elements on the page, in which a specific form can be obtained by means of a numeric index or the Name property of the form. Such as:

document.forms[0],document.forms[' name ']

Properties and methods unique to 2.form:

Unique properties:

Action: Equivalent to the Aciton attribute in HTML

Length: The number of controls in the form

Method: Equivalent to the method in HTML

Name: equivalent to name in HTML

Elements: A collection of all the controls in the form. A reference to a control, such as elements[0] or elements[' username, is usually obtained by using a numeric index or the name of the control as an index. This is sometimes much more convenient than the usual DOM approach. If more than one form space uses the same name (such as a radio button), a NodeList collection named with that name is returned.

Unique methods (These methods can be used to proactively trigger the corresponding time):

A. Form submission focus

When the user clicks the Submit button or the image button, the form is raised, including

<input type= ' submit ' value= ' xxx ' >

<button type= ' Submit ' > Submit </button>

<input type-= ' image ' src= ' xxx ' >

Submit the form in this way, and before the request is sent, you will be able to cancel the form submission by touching the submit event of the post.

In addition, the use of programmatically invoking submit () in JS also submits the form without having to include any submit buttons, but when submitted with this method, the submit event is not triggered, so remember to validate the form data before calling this method.

B. Form reset reset

Similarly, there are two ways of resetting

The user clicks the Reset button and the form is reset

<input type= ' reset ' value= ' xxx ' >

<button type= ' Reset ' >reset</button>

The reset () method of the call form in JS can also reset the form, unlike submit (), which triggers the reset event as if it were a reset button.

Two. form field elements

The fields of the form include, but are not limited to:

Input (optional values for type include: Text,submit,radio,checbox), textarea,button,fieldset,select>option, and so on. HTML5 also adds many new types, including input (type optional values including Password,url,email, and so on) that are no longer explored here.

The element fields in the form can be accessed using the DOM method, or you can use the Elements property of the form to obtain a specific reference using the numeric or Name property. The properties and methods of these form elements are as follows:

1) Common Properties

Disabled: Indicates whether the current field is disabled. Note: In Web development, to avoid duplicate submissions of forms, the most common solution is to listen to the form's submit event, which sets the disable=true of the submit button when the event occurs.

Form: Point to the form to which the current field belongs

ReadOnly: Represents whether read-only

TabIndex: Toggle (tab) Ordinal of the current field

Form: A reference to the form to which the current field belongs.

Name: Names of the current fields

Type: field type, such as Text,radio,checkbox,select one,select multiple, etc.

Value: The current field will be committed to the server-side value. For form fields, it is recommended to use value for property reading and setting, rather than a typical Dom method.

For <input type= ' text ' >,<textarea></textarea>, the user-entered content is saved in value.

For a SELECT element, the value is determined by the current selection. If there are no items selected, then an empty string, if there are more than one, is determined by the first one.

The value for Input:radio/checbox,value is determined based on whether the current element is checked.

2) Common Methods for form fields

Blur (): Can proactively trigger blur events

Focus (): Can proactively trigger focus events

3) Common events for form fields

Blur: Trigger When current field loses focus

Focus: Starting when the current field receives focus

Change: For elements such as <input>,<textarea>, triggered when they lose focus and value changes, for <select> elements that are triggered when the option changes.

three, Input[type=text] and TextArea text box fields

<input type="text" size=" maxlength="50  " value="initial value">

Input[type=text] You can use size to specify the number of characters the text box can display, and you can use the Value property to specify the initial value by MaxLength limit the maximum number of characters that the text box can accept

<textarea name="" id= "" cols="5" rows=" >initial value</textarea>

TextArea can use rows to specify the number of character lines, cols specify the number of character columns. Its initial value should be placed between <textarea> and </textarea>.

In addition to supporting Focus,blur events that are common to form fields, the usual events include:

1) Change: Starts when text and textarea lose focus and value changes.

2) KeyPress: for filter input

3) KeyUp:

4) Select event and select Active Trigger method

The Select () event selects all text in the text box (for example, if the text box contains default values, the user does not have to delete them), and the Select () method corresponds to the Select event, which is triggered when the user selects the text and releases the mouse. The selected text can be obtained through the SelectionStart and selectionend of the text element.

HTML5 also provides a way to trigger the selection of some text, which is not discussed here.

Iv. drop-down box field select and option

 <select  name= " select   id="  select   > <option value="  1   " > "  " >2  </option> <option value= "  3   " > 3  </option> </select  > 

1) Unique properties of Select

The type value of select is either "Select-one" or "select-multiple", depending on whether there is a multiple attribute in the HTML tag.

Multiple:boolen value, whether multiple selections are allowed

Options: Htmlcollection of all <option> elements

SelectedIndex: The index of the selected item

The value values for select are determined by the current selection, and the rule is as follows:

A. If no item is selected, value is ';

B. If there is a check and the value of the item is specified in HTML, value equals the specified in the HTML;

2) Select Unique method

Add (newoption,reloption): Inserts a new option into the control before reloption

Remove (index). Delete the option indexed as index

3) option also has some unique attributes, including:

Index: Indexing of the current option;

Selected: Whether it is selected

Text: Texts of options

Value: Values for options

4) drop-down box creation action

A. Get the value of the selected item

If it is a radio

Selectbox.options[selectbox.selectedindex].value  

If it is multi-select, then only the traversal, detecting the selected property of each property gets

B: Set options

// method One, only for radio selectbox.selectedindex=index; // method Two selectbox.options[index].selected=true;

C: Monitor Value Change event (switch event)

Selectbox.addeventlistener ('change', function (e) {    dosomething ();}; false);

D: Add options

// If you add multiple items, it's best to use the innerHTML method // if adding a single Option,dom method is less convenient than the following: var option=new option ('option text','option value ' ' ); Selectbox.add (option,undefined);

E: Delete option

// You can use the DOM's removechild, or you can delete a single optionSelectbox.remove (0) using the following method;

Five, radio button

<divclass="Radio-group"> <label><input type="Radio"Name="Sex"Value="FEMAIL"> Men </label> <label><input type="Radio"Name="Sex"Value="Mail"> Women </label> </div>

Common operations:

A: Get nodelist for radio buttons

// method One form.elements['sex']// method two Document.getelementsbyname ('sex')

B: Gets the value of the radio button selected item

// There is no better way, only to traverse  for (var i=0; i<radios.length;i++) {    if(Radios[i].  Checked) {        return  radios[i].value;    }}

However, the background gets the value of the radio commit, it seems to only use the name corresponding field property can be

C: Listen radio button Check the event that the item changed (note that the Click event is listening, we recommend using a delegate)

Radiogroup.addeventlistener ('click', function (e) {    if( e.target.type=='radio') {        dosomething ();    }},false);

Six: check box checkbox

<divclass="Checkbox-group"> <label for="Swim"><input type="checkbox"Name="Sport"Id="Swim"Value="Swimming"></label> <label for="Running"><input type="checkbox"Name="Sport"Id="runing"Value="Running"></label> <label for=" Ball"><input type="checkbox"Name="Sport"Value="Badminton"Id=" Ball"></label> </div>

Common operations:

A: Get a list of check boxes, using the same radio box, with Getelementsbyname or Form.elements][name]

B: Gets the value checked by the check box: The method and the radio box are similar, only traverse all the values, the background gets the check box's value is relatively simple, the name corresponds to an array

C: Listen check box to change the status, similar to the radio box, also need to listen to the Click event

JavaScript Action Form