Click here to check my latest exciting videos on youtube
Search Mallstuffs

Flag Counter
Spirituality, Knowledge and Entertainment

Locations of visitors to this page

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

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="">
<title>My Test Page</title>
<script src="jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
function ()  {
':text').focusout(function ()  {
<input type = "text" />
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">
9. Add the following code in JavaScript function
     $('#AsianCountries').change(function ()  {
  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   


Share this to your friends. One of your friend is waiting for your share.
Share on Google+ Share on Tumblr Print Browser Favorite
Related Articles
Advanced JQuery Fading Effects
Different types of File Read Operations
Data Validation using Ajax MaskedEditExtender control
Simple Ajax client server Example
How AJAX Works, advantages and disadvantages
Jquery features, Advantages and disadvantages
What is Silverlight,its features and how it works
How Silverlight works internally
Give rounded corners to your panel using Ajax
Response.Redirect throws _Thread was being aborted_

Post Comment