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
3289 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="https://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.
Share on Google+ Share on Tumblr Print Browser Favorite
Related Articles
Manipulating Elements and Animations Using Jquery
What is Silverlight,its features and how it works
Silverlight New features & system requirement
Calling silverlight methods from javascript
Simple Ajax client server Example
Response.Redirect throws _Thread was being aborted_
Different types of File Read Operations
Tips and tricks with ajax calendar extender control
Give rounded corners to your panel using Ajax
How to encode and decode HTML request in ASP.NET

Post Comment