JQuery uses (4) to process the form elements of a page. jquery forms

JQuery uses (4) to process the form elements of a page. jquery forms

A form is a special page element, and the value is the most important. jQuery provides a powerful val () method to process related operations.

1. Obtain the value of the form element.
You can directly call the val () method to obtain the value of the first element in the selector. For example:

$("[name=radioGroup]:checked").val;

The code above directly obtains the value selected in the form element with the property of radioGroup, which is very convenient. For some form elements, such as <option> <button> without a value, the displayed text value is obtained.
If the first form Element in the selector is multiple (for example, a drop-down menu), val () returns an array consisting of the selected value values.

Bytes. You can use val () to directly obtain the element values of the form. You do not need to consider whether the drop-down menu is single-choice or multiple-choice.

<Script type = "text/javascript"> function displayVals () {// directly obtain the value of the selected item var singleValues =$ ("# constellation1 "). val (); var multipleValues =$ ("# constellation2 "). val () | []; // if this parameter is not selected, $ ("span" ).html ("<B> Single: </B> "+ singleValues +" <br> <B> Multiple: </B> "+ multipleValues. join (",") ;}$ (function () {// call $ ("select") when the selected item is modified "). change (displayVals); displayVals ();}); </script> <select id = "constellation1"> <option value = "Aries"> Aries </option> <option value = "Taurus"> Taurus </option> <option value = "Gemini"> Gemini </option> <option value = "Cancer"> Cancer </option> <option value = "Leo"> Leo </option> <option value = "Virgo"> Virgo </option> <option value = "Libra"> Libra </option> <option value = "Scorpio"> Scorpio </option> <option value = "Sagittarius"> shooter </option> <option value = "Capricorn"> Capricorn </option> <option value = "Aquarius"> water bottle </option> <option value =" pisces "> Pisces </option> </select> <select id =" constellation2 "multiple =" multiple "style =" height: 120px; "> <option value =" Aries "> Aries </option> <option value =" Taurus "> Taurus </option> <option value =" Gemini "> Gemini </option> <option value = "Cancer"> Cancer </option> <option value = "Leo"> lions </option> <option value = "Virgo"> virgins </option> <option value = "Libra"> Libra </option> <option value = "Scorpio"> Scorpio </option> <option value = "Sagittarius"> shooter </option> <option value = "Capricorn"> Capricorn </option> <option value = "Aquarius"> water bottle </option> <option value = "Pisces"> Pisces </option> </ select> <span> </span>

The preceding Code directly uses val () to obtain the select value. jQuery greatly shortens the code length.

2. Set the value of the form element.

Like attr () and css (), val () can also be used to set the value.

<Script type = "text/javascript"> $ (function () {$ ("input [type = button]"). click (function () {var sValue = $ (this ). val (); // obtain the value of the button $ ("input [type = text]"). val (sValue); // assigned to the text box });}); </script> <p> <input type = "button" value = "Feed"> <input type = "button" value = "the"> <input type = "button" value = "Input"> </p> <input type = "text" value = "click a button"> </p>

The above Code uses the val () method twice, one is to get the value of the button, and the other is to assign the obtained text to the input text box.

It is not easy to write a blog. You are welcome to give comments for encouragement. Sharing is a pleasure! You are welcome to shoot bricks and likes. (JavaScript, ajax, and jQuery articles are constantly updated. Follow me to stay updated)

Other highlights

JQuery tutorial (29)-jQuery plug-in development-Specify parameters for plug-in Methods jQuery tutorial (28)-jQuery plug-in development-jQuery tutorial (27) -jQueryajax-Modify default options jQuery tutorial (26)-ajax-use JSONP to load Remote Data jQuery tutorial (25)-security restrictions on ajax operations