JQuery value

June 3rd, 2011 | Posted by admin | No Comments

Introduction:

Web developers and programmers will often need to get values from form elements to know the status of the form elements. If they want to do it in jquery “.val()” is the method used to get the values of form elements. Today we will discuss about jquery .val() method. Which is used mainly to get value of form elements.

Lets say for example we have a html web page with an input element,

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="container">
  <input type="text" value="some text"/>
</div>
</body>
</html>

Here we have an input element which is a text box type. Now if we want to get the value entered in the textbox, we should use the .val() method to get it.

<script>
    $(document).ready(function () {
        //Get the value of input element
       var textboxValue = $("input").val();
    });
</script>

Now we get the value, which we entered in the text box will be stored in the textboxValue variable. Its a very simple one line code which does everything. We can also use .val() method for most of the form elements like select box, check box, radio button etc to get value of the elements.

To Get the value of a select box, we use

$("select").val();

To Get the value of a check box, we use

$(".checkbox:checked").val();

here checkbox is the class name of the checkbox

To Get the value of a radio button, we use

$(".radiobutton").val();

here radiobutton is the class name of radiobutton

To get the basic idea of .val() method of jquery, i have implemented a demo. which will give you a clear idea of getting values of form elements using jquery .val() method.

Posted in : Jquery


Leave a Reply

You must be logged in to post a comment.