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.min.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.min.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.min.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.min.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.
  • aladin
    Is it normal behavior that $('select :selected').val(); returns UNIX date if actual value is like '2010.09.09' and if I use .text() it returns '2010-09-09'.
  • how to set value of an input when its named some like this

    <input name="data['field1']" type="text">

    ??
  • Jesse Adler
    It isn't mentioned but helps a lot.
    $('textarea').val() returns content from <textarea>...</textarea>
  • Dmik2000
    $('#selectId').val("value") will not work is select is hidden (dysplay:none) in IE6.
  • Same thing is happening here. But I think this used to work in the past!
  • Geoffrey
    I have noticed that if the input you want to update value has the same name and id, $("#id").val("new value"); doesn't work properly (at least in Firefx 3.6).

    An alert would tell you the new value but it's not truly added to the input. So make sure your input has a different name and id.
  • barius
    Thats because # selector uses getDocumentById and it returns only the first found element. If you have multiple same id elements, use $('[id=myId]') instead of $('#myId')
  • John6630
    I see this in my asp.net page. But how do I set a different name from ID since ASP.Net sets the name automatically to same as the id?
  • Cre8vMedia
    I am trying to write a script to clear the default value of an input[type=text] on focus and return it to the default value when it is not changed when it is off focus. I need help here...
  • romont johnson
    $(document).ready(function() {
    $("input[name=foo]").focus(function() {
    var foo = $("input[name=foo]").val();
    if (foo == "value")
    {
    $("input[name=foo]").val('');
    }
    });

    $("input[name=foo]").blur(function() {
    var foo = $("input[name=foo]").val();
    if (foo == '')
    {
    $("input[name=foo]").val("value");
    }
    });
    });
  • guestt
    In the first example used:
    $("input").keyup(function () {
    var value = $(this).val();
    $("p").text(value);
    }).keyup();


    Why not use:
    $("input").keyup(function () {
    var value = $(this).val();
    $("p").text(value);
    });

    What's the catch?
  • xeron
    So that the "p" is initially set to the value of the input (without explicitly coding it above). The .keyup at the end is immediately invoking it.
  • Dan
    In jquery 1.3.2 .val('') does not clear the input box. Need to use .attr('value', '') instead.
  • JD
    im using .val() to set the initial value of a dropdown when loading a form. in firefox, i have no problem using .val(select_box_index) ... but in chrome i need to use the selectbox value (also works in firefox). for various reasons id prefer to use index over value ... which is it supposed to be for this?
  • Anjum
    <select id="foo" name="foo[]"><option selected="" value="option1">My Selected Option</option><option value="option2">My non-selected Option</option><option selected="" value="option3">Another Selected Option</option></select>
    Please note that it is not multiple. How can i get selected value

    I have tried this, but not working
    var multipleValues = $("select[name=foo[]]").val();

    Please help
  • andrea
    $("select[name=foo\\[\\]]").val();

    http://api.jquery.com/category/selectors/
  • arnab c
    val() method should not be used to set values to input type File, it will not work. just my two cents :-)
  • Even in HTML, you can not change the value of input type File.
    To avoid security problems.
  • When the <select> has no options selected this behaves differently in these versions.jQuery 1.3.2 returns an empty stringjQuery 1.4.2 returns null Wasted SO much time figuring this one out...</select>
  • in jQuery 1.3.2

    jQuery('select#ID').bind('change', handler);
    function handler (e) {
    var thisval = jQuery(this).val(); // expected value
    var byIDval = jQuery('#ID').val(); // empty string
    }