.val() JQ Home  <<  A & P  <<  .val()

First element current value retrieval and matched set value setting.

Description

The .val() method is used to retrieve the current value from the first element within the matched set, or set the value of each element within the matched set.

  • Useful for getting and setting the values of form elements.
  • When used with <select multiple="multiple"> elements .val() returns an array of all selected elements.
  • Use the .attr() method to retrieve or set DOM attributes.
  • When changing the dynamic state of a DOM element, the .prop() method should be used to set disabled and checked.
  • When changing the dynamic state of a DOM element, the .val() method should be used for getting and setting value.

Syntax

Signature Description
.val() Retrieve the current value from the first element within the matched set.
.val( value ) Set the value of each element within the matched set.
.val( function(index, value) )A function returning the value to set.

Parameters

Parameter Description Type
valueA string, or an array of strings, corresponding to the value of each matched element to set as selected/checked. String or
Array
function(index, value)A function.
  • Each time the callback runs, it is passed the current index position of the element in the set.
  • The existing value pertaining to the current element is also passed.
  • The callback is fired in the context of the current element in the set, so the keyword this refers to that element.
 Function

Return

Retrieving - An Array, Number or String object.

Setting - A jQuery object including the updated value within the matched set.

.val() Example A & P  <<  Top

Retrieve the current value from the first element within the matched set.

In the example below when we press the button we get the values of the selected 'radio' and 'select' elements and alert them.

Pie Survey

Which pie do you prefer?:

Select a pie shape: 


$(function(){
  $('#btn9').on('click', function() {
    alert('You like a ' +  $('.ourform select option:selected').val() 
                        + ' shaped ' + $('input:radio[name=pie]:checked').val() + ' pie.');
  });
});

Press the button below to action the above code:

.val( value ) ExamplesA & P  <<  Top

Set the value of each element within the matched set.

In the example below when we press the left button we first select the radio boxes with the name attribute of 'pies'. We then change the value of the selected 'radio' element to 'Chicken'. We need to set this within the context of an array.

When we press the right button we change the value of the selected 'select' element.

*** NOTE: We are showing the HTML code so you can see we have selected the value attribute of the select item to change it ('Square') and not the text itself ('square').


<form action="" class="ourform">
  <fieldset class="formfields2>
    <legend>Pie Survey</legend>
    <p>Which pie do you prefer?:</p>
  <p><input type="radio" name="pies" checked="checked" value="Chicken" id="chicken" />
     <label for="chicken">Chicken</label></p>
  <p><input type="radio" name="pies" value="Fish" id="fish" />
     <label for="fish">Fish</label></p>
  <p><input type="radio" name="pies" value="Shepherds" id="shepherds" />
     <label for="shepherds">Shepherds</label></p>
    <p>Select a pie shape:</p>
    <p><select  id="mySelect"  name="mySelection">	
        <option selected="selected"  value="Round">round</option>
        <option value="Square">square</option>
        <option value="Hexagon">hexagon</option>
        <option value="Star">star</option>
        <option value="Triangle">triangle</option>
    </select></p>	
  </fieldset>
</form>
Pie Survey

Which pie do you prefer?:

Select a pie shape: 


$(function(){
  $('#btn10').on('click', function() {
    $('input:radio[name=pies]').val(['Chicken']);
  });
  $('#btn11').on('click', function() {
    $('#mySelect').val('Square');
  });
});

Press the button below to action the above code:

               

.val( function(index, value) ) Example A & P  <<  Top

A function returning the value to set.

In the example below when the button is pressed we call a function to change the 'select' element value to the value when the index is 3 (Star).

Pie Survey

Select a pie shape: 


$(function(){
  $('#btn12').on('click', function() {
    $('#mySelect2 [value]').val( function(index, value) {
       if (index == 3) {
           return $('#mySelect2').val(value);
       }
    });
  });
});

Press the button below to action the above code:

Related Tutorials

jQuery Basic Tutorials - Lesson 9 - CSS Attributes