Jquery obtains the value of form elements.

How does jquery obtain the value of text, areatext, radio, checkbox, select, and other operations? Suppose we have the following page:

<Input type = "text" name = "textname" id = "text_id" value = "">

No more...

 

The following describes how to obtain various values in form;

Function get_form_value (){

/* Obtain the value of text. areatext */

VaR textval = $ ("# text_id"). ATTR ("value"); // or

VaR textval = $ ("# text_id"). Val ();

/* Obtain the value of the single-choice button */

VaR valradio = $ ("input [@ type = radio] [@ checked]"). Val ();

/* Obtain the value of the check box */

VaR checkboxval = $ ("# checkbox_id"). ATTR ("value ");

/* Get all values in the drop-down list */

VaR selectval = $ ('# select_id'). Val ();

// Obtain the value selected from the drop-down list. This method works for all drop-down lists.

// This method works for all the drop-down boxes

// If you obtain an ID, $ ('# ID> Option'). Each ().

 

$ ('Select> option'). Each (function (){

If ($ (this). ATTR ('selected') = true)

{

Alert ($ (this). Text ());

}

})

}

3. Other processing of the form:

// Control form elements:

// Text box, text area:

$ ("# Text_id"). ATTR ("value", ''); // clear the content

$ ("# Text_id"). ATTR ("value", 'test'); // fill in the content

// Multiple choice box checkbox:

$ ("# Chk_id"). ATTR ("checked", ''); // value not selected

$ ("# Chk_id"). ATTR ("checked", true); // The selected value

If ($ ("# chk_id"). ATTR ('checked') = undefined) // you can check whether the selected

// Single-choice group Radio:

$ ("Input [@ type = radio]"). ATTR ("checked", '10'); // set the single-choice button with value = 10 to the selected item

// Select from the drop-down list:

$ ("# Select_id"). ATTR ("value", 'test'); // set the project with value = test as the selected item

$ ("<Option value = 'test'> test </option> <option value = 'test2'> Test2 </option> "). appendto ("# select_id") // Add the option in the drop-down box

$ ("# Select_id"). Empty (); // clear the drop-down list

During the development process, page form elements are often processed, such as obtaining the value of selected in the select drop-down box and the value of checked in the check box checkbox, to trigger and call other page form elements to create a form that is highly interactive and page-friendly. Jquery uses element $ (# ID) to generate an object. With an in-depth understanding of the obtained object, jquery can obtain any information in any page element for ease of work, I have summarized the methods for using jquery to operate object objects, and obtained the selected, check box, and single checked values in the drop-down box for your reference.   Form instance: I. html Section <Form> <! -- Obtain the selected value of select biuuu.com --> <Select id = "selectid"> <option value = "biuuu_s1"> S1 </option> <Option value = "biuuu_s2"> S2 </option> <Option value = "biuuu_s3"> S3 </option> <Option value = "biuuu_s4"> S4 </option> </SELECT> <Input type = "button" id = "sbuttonid" value = "get selected value"/> <span id = "sresult"> </span> <br/> <! -- Get the checked value of the checkbox biuuu.com --> <Input type = "checkbox" name = "checkboxid" value = "biuuu_c1"/> C1 <input type = "checkbox" name = "checkboxid" value = "biuuu_c2"/> C2 <input type = "checkbox" name = "checkboxid" value = "biuu_c3"/> C3 <input type = "checkbox" name = "checkboxid" value = "biuuu_c4"/> C4 <input type = "button" id = "cbuttonid" value = "Get checkbox value"/> <span id = "cresult"> </span> <br/> <! -- Get the checked value of Radio biuuu.com --> <Input type = "radio" name = "radioid" value = "biuu_r1"/> R1 <input type = "radio" name = "radioid" value = "biuuu_r2"/> r2 <input type = "radio" name = "radioid" value = "biuu_r3"/> R3 <input type = "button" id = "rbuttonid" value = "Get radio value "/> <span id = "rresult"> </span> <br/> <! -- Get the value of text biuuu.com --> <Input type = "text" id = "textid" value = ""/> <input type = "button" id = "tbuttonid" value = "Get Text Value"/> <SPAN id = "tresult"> </span> </form> Ii. js part $ (Document). Ready (function (){ $ ("# Sbuttonid"). Click (function () {// obtain the select object VaR selectedobj = $ ("# selectid option: Selected"); // gets the value of the current selected VaR selected = selectedobj. Get (0). value; $ ("# sresult" ).html ("Result:" + selected ); }); $ ("# Cbuttonid"). Click (function () {// get the checkbox object VaR check = ''; VaR checkedobj = $ ("[name = 'checkboxid'] [@ checked]"); // obtain the value of the current checked. If multiple checked values are selected, the system loops. Checkedobj. Each (function () {var ischeck = This. value; check + = ischeck; }); $ ("# Cresult" example .html ("Result:" + check ); }); $ ("# Rbuttonid"). Click (function () {// obtain the radio object VaR radioobj = $ ("[name = 'radioid'] [@ checked]"); // obtain the value of the current checked. VaR radio = radioobj. Get (0). value; $ ("# rresult" ).html ("Result:" + radio ); }); $ ("# Tbuttonid"). Click (function () {// get the text object VaR textobj = $ ("# textid"); // obtain the value of the current text VaR text = textobj. Get (0). value; $ ("# tresult" example .html ("Result:" + text ); }); }); The instance effect is as follows: (omitted)   The procedure is as follows: 1. jquery obtains the object, such as the select object in the drop-down box, single-dataset radio object, check box checkbox object, and Text object in the text box; 2. Get the object value. For elements with unique values, such as select, radio, and text, get the value through the get () method. For data elements, such as checkbox, get the value through the each loop. Why is get (0 )? Get (0) is like an array subscript. The default value starts from 0. The example shows that jquery's object call is very useful for getting form elements. You can obtain the selected value, the checked value of the complex/single statement, and the value of the text, the interaction and flexibility of form elements are enhanced. In the above example, we mainly consider the calling principle of jquery objects. The code is relatively large. In actual use, we can simply use the following lines of code: 1. Obtain the selected value: $ ("# selectid option: Selected"). Get (0). Value 2. Obtain the radio checked value: $ ("[name = 'radioid'] [@ checked]"). Get (0). Value 3. Get the text value: $ ("# textid"). Get (0). Value Get the element value of a form is mainly the get () Object Access Method in jquery, followed by the each () method. Remember that $ (# ID) produces an object, you can use the jquery object access method to obtain the value. The jquery object access method list is as follows: 1. Each () loop, equivalent to foreach; 2. Size () statistics; 3, length () count; 4. Get () one or more; 5. Index () index; Jquery provides a wide range of Object Access methods. By understanding the methods used to access objects, you can easily obtain the form values such as selected, checked, and text. Jquery obtains the values of text, areatext, radio, checkbox, select, and other operations; 1. Suppose we have the following page: <Input type = "text" name = "textname" id = "text_id" value = ""> <! -- Add the rest. The important thing is to have type. Name. ID and so on. Generally, these are all available. --> 2. The following describes how to obtain various values in form; Function get_form_value (){ /* Obtain the value of text. areatext */ VaR textval = $ ("# text_id"). ATTR ("value"); // or VaR textval = $ ("# text_id"). Val (); /* Obtain the value of the single-choice button */ VaR valradio = $ ("input [@ type = radio] [@ checked]"). Val (); /* Obtain the value of the check box */ VaR checkboxval = $ ("# checkbox_id"). ATTR ("value "); /* Get the value of the drop-down list */ VaR selectval = $ ('# select_id'). Val (); } 3. Other processing of the form: // Control form elements: // Text box, text area: $ ("# Text_id"). ATTR ("value", ''); // clear empty content $ ("# Text_id"). ATTR ("value", 'test'); // fill in the content // Multiple choice box checkbox: $ ("# Chk_id"). ATTR ("checked", ''); // unselected Value $ ("# Chk_id"). ATTR ("checked", true); // select the value If ($ ("# chk_id"). ATTR ('checked') = undefined) // you can check whether the selected // Single-choice group Radio: $ ("Input [@ type = radio]"). ATTR ("checked", '10'); // set the single-choice button with value = 10 to the selected item // Select from the drop-down list: $ ("# Select_id"). ATTR ("value", 'test'); // set the project with value = test as the selected item $ ("<Option value = 'test'> test </option> <option value = 'test2'> Test2 </option> "). appendto ("# select_id") // Add the option in the drop-down box $ ("# Select_id"). Empty (); // clear the drop-down list