.val()S2C Home « Attributes & Properties « .val()

• <<    .removeprop()
• .addClass()     >>

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

Parameters

Return

Retrieving - An Array, Number or String object.

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

.val() ExampleTop

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.

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

.val( value ) ExamplesTop

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>

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

.val( function(index, value) ) ExamplesTop

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).

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

• <<    .removeprop()
• .addClass()     >>