Search Mallstuffs

Flag Counter
Spirituality, Knowledge and Entertainment




Latest Articles


Move to top
Get Set Value of any HTML element using jquery-Val function
Posted By Sarin on May 27, 2012     RSS Feeds     Latest Hinduism news
1881 Views

If you have a form and want to get the value of an input box, you need to use the val() function. Normal text and html function will not work here.
The following example gets the text a user has entered in a text field and displays it on the page as soon as the user removes the focus from the text field:
  
1. Create a Web page containing the following code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Test Page</title>
  
<script src="jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(
function ()  {
        $(
':text').focusout(function ()  {
            alert($(
':text').val());
        });
    });
</script>
</head>
<body>
<input type = "text" />
<div></div>
</body>
</html>
This code contains a text field and a <div> element.
The code says, “When the user removes the focus from the text field, show an alert box and display the value of the text field.”

2. Save this file, and then view it in your browser.
3. Type something in the text field and then click anywhere outside the textbox to remove focus from the textbox.
An alert box opens containing the text from the text field, as shown below
  

  
  
Instead of showing an alert box, let us display the value in the <div> element.

4. Change
 alert($(':text').val());    to $('div').text( $(':text').val() );
6. Save the file, and then view it in your browser.
7. Type something in the text field, and then click anywhere outside the text field.
  
Now the text field text appears in the <div> element, as shown below


  
Now, let extend this functionality with select form element,  

8. Add this code to create a select box:
<select id="AsianCountries">
<option>India</option>
<option>Pakistan</option>
<option>SriLanka</option>
</select>
  
9. Add the following code in JavaScript function
     $('#AsianCountries').change(function ()  {
            $(
':text').val(($(this).val()));
        });
  
  The change () function detects the change in the value of the select element named  ‘AsianCountries'’. When the select box value has changed, this change event is triggered. The second line assigns the value from the select box to the text field. i.e. $(this).val will retrieve the value of form element and will assign it to text element by using its Val function.

10. Save this file, and then view it in your browser.
11. Select one of the drop-down values.
As shown below, selected value will be displayed in textbox.


12. Add this code to create a check box group:
Also add a button on click of which m checkboxes will be selected
<input type="checkbox" name="Location" value="India">India</input>
<input type="checkbox" name="Location" value="US">US</input>
<input type="checkbox" name="Location" value="UK">UK</input>
<input type="checkbox" name="Location" value="Germany">Germany</input>
<input type="checkbox" name="Location" value="France">France</input>
<input type="button" id="btnset" value="setcheckbox" title="set" />
13.  Add the JQuery function to set multiple values of checkbox.
$('[name = Location]') will get the element with name Location. In our case, element is checkbox. Now array of values is set as value to this checkbox. So, this Val function will match each of the value of an array with the checkboxes value and will select the checkbox if the match happens.

$('#btnset').click(function ()  {
            $(
'[name = Location]').val(['US', 'Germany', 'India']);
        });


So, three different uses of  Val function can be summarized as follows:
Function   Parameter Return Value Description Limitation/ Examples
val() NoneThe fetched value or values. Returns the value property of the first element in the matched set. When the element is a Multi-select element, the returned value is an array of all selections. 1. If the first element in the wrapped set isn’t a form element, a JavaScript error is thrown. 2.  Since Val () only considers the first element In a wrapped set, it’s not useful for checkbox groups where more than one control might be checked.  
val(value) String wrapped set Sets the passed value as the value of all matched form elements Only a  single value is supplied, hence it cannot be used to set multiple values into a multiselect list 
val(values) Array Wrapped set. Causes any check boxes, radio buttons, or options of <select> elements in the wrapped set to become checked or selected if their values match any of the values passed in the values   



here


Share this to your friends. One of your friend is waiting for your share.

Related Articles
Response.Redirect throws _Thread was being aborted_
How to encode and decode HTML request in ASP.NET
Hide or unhide data using Visibility ValueConverter class
Ways of implementing AJAX
Get Set Value of any HTML element using jquery-Val function
How Silverlight works internally
Advanced JQuery Fading Effects
How AJAX Works, advantages and disadvantages
Give rounded corners to your panel using Ajax
Select Parent, Child, sibling,descendants HTML element using jquery

Post Comment




Software developer by profession,
Poet by hobby,
Blogger by Passion
Birth Place: Munger, Bihar
Residence: Mumbai, Maharashtra
Prof exp: 8 years

Read More about me

Read my daily what'sapp quotes
Most Viewed Articles

Latest Spiritual Videos


Latest Funny Videos

Latest News

Latest Social Post
Latest WhatsApp Quotes