jQuery API

.val()

Categories: Attributes | Forms | Manipulation > General Attributes
Contents:

.val() Returns: String, Array

Description: Get the current value of the first element in the set of matched elements.

  • version added: 1.0.val()

The .val() method is primarily used to get the values of form elements. In the case of <select multiple="multiple"> elements, the .val() method returns an array containing each selected option.

For selects and checkboxes, you can also use the :selected and :checked selectors to get at values, for example:

$('select.foo option:selected').val();    // get the value from a dropdown select
$('select.foo').val();                    // get the value from a dropdown select even easier
$('input:checkbox:checked').val();        // get the value from a checked checkbox
$('input:radio[name=bar]:checked').val(); // get the value from a set of radio buttons

Examples:

Example: Get the single value from a single select and an array of values from a multiple select and display their values. 

<!DOCTYPE html>
<html>
<head>
  <style>
  p { color:red; margin:4px; }
  b { color:blue; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
	<p></p>
  <select id="single">
    <option>Single</option>
    <option>Single2</option>

  </select>
  <select id="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>

    <option selected="selected">Multiple3</option>
  </select>
<script>
    function displayVals() {
      var singleValues = $("#single").val();
      var multipleValues = $("#multiple").val() || [];
      $("p").html("<b>Single:</b> " + 
                  singleValues +
                  " <b>Multiple:</b> " + 
                  multipleValues.join(", "));
    }

    $("select").change(displayVals);
    displayVals();

</script>
</body>
</html>

Demo:

Example: Find the value of an input box. 

<!DOCTYPE html>
<html>
<head>
  <style>

  p { color:blue; margin:8px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
	<input type="text" value="some text"/>
  <p></p>
<script>
    $("input").keyup(function () {
      var value = $(this).val();
      $("p").text(value);
    }).keyup();
</script>
</body>
</html>

Demo:

.val( value ) Returns: jQuery

Description: Set the value of each element in the set of matched elements.

  • version added: 1.0.val( value )

    valueA string of text or an array of strings to set as the value property of each matched element.

  • version added: 1.4.val( function(index, value) )

    function(index, value)A function returning the value to set.

This method is typically used to set the values of form fields. For <select multiple="multiple"> elements, multiple <option>s can be selected by passing in an array.

The .val() method allows us to set the value by passing in a function. As of jQuery 1.4, the function is passed two arguments, the current element's index and its current value: 

$('input:text.items').val(function(index, value) {
  return value + ' ' + this.className;
});

This example appends the string " items" to the text inputs' values.

Examples:

Example: Set the value of an input box. 

<!DOCTYPE html>
<html>
<head>
  <style>
  button { margin:4px; cursor:pointer; }
  input { margin:4px; color:blue; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
	<div>
    <button>Feed</button>
    <button>the</button>

    <button>Input</button>
  </div>
  <input type="text" value="click a button" />
<script>
    $("button").click(function () {
      var text = $(this).text();
      $("input").val(text);
    });
</script>
</body>
</html>

Demo:

Example: Set a single select and a multiple select . 

<!DOCTYPE html>
<html>
<head>
  <style>
  body { color:blue; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
	<select id="single">
    <option>Single</option>
    <option>Single2</option>
  </select>

  <select id="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>

    <option selected="selected">Multiple3</option>
  </select><br/>
  <input type="checkbox" name="checkboxname" value="check1"/> check1
  <input type="checkbox" name="checkboxname" value="check2"/> check2
  <input type="radio"  name="r" value="radio1"/> radio1
  <input type="radio"  name="r" value="radio2"/> radio2
<script>

    $("#single").val("Single2");
    $("#multiple").val(["Multiple2", "Multiple3"]);
    $("input").val(["check1","check2", "radio1" ]);

</script>
</body>
</html>

Demo:

Comments

  • Support requests, bug reports, and off-topic comments will be deleted without warning.

  • Please do post corrections or additional examples for .val() below. We aim to quickly move corrections into the documentation.
  • If you need help, post at the forums or in the #jquery IRC channel.
  • Report bugs on the bug tracker or the jQuery Forum.
  • Discussions about the API specifically should be addressed in the Developing jQuery Core forum.
  • this function doesn't return value of LI

    <ol>
    <li value="1">1</li>
    </ol>

    $("li").val()

    throw an error

    (elem.value || "").replace is not a function

    And yes I know that this attribute is deprecated
  • namata
    val() function will not work for textareas in Opera if you did not set «name» attribute for tag «textarea».
  • garcon1986
    It's a great function. I'm trying to use it. Thanks guys.
  • This page should document the behavior of val() when no elements are matched.
  • It behaves the same way any other jQuery method does when no elements are matched. The getter doesn't run, and the setter returns the (empty) jQuery set.
  • I realize that. I should have been more specific. I was referring to return value of the getter. If no elements are matched, and the getter doesn't run, what's returned? null, empty string, something completely unexpected?

    Similarly, for select elements, if no selection was made, what's returned?

    It's not hard to find out, but it'd be nice if it was documented.
  • doitsu-jin
    well, im just wondering about the behaviour of jQuery.val(). in my case i'm using it without any parameters to obtain the value of an input formfield. But everytime called it resets the value of the input after returning it.
  • hombrepipa
    I had the same problem and I realized out the next solution:

    I was using the following code to reset the value of a determinated input in case this was empty:

    $("#whatevertheinputis").focusout(function() {
    if($(this).val(""))
    {
    $(this).val("Default text");
    }
    });

    It did'nt worked because it reseted the input even if the user wrote some text. But, luckely, I have come with this:

    $("#whatevertheinputis").focusout(function() {
    if($(this).val() == "")
    {
    $(this).val("Default text");
    }
    });
  • If using jQuery <=1.3.x you must use this:

    var element = $(this);
    var currentValue = element.val();
    element.focus(function() {
    if(element.val() == currentValue) {
    element.val('');
    }
    }).blur(function() {
    if(element.val() == '') {
    element.val(currentValue);
    }
    });