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

Source: Internet
Author: User

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:


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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.