.val()

Syntax for .val() (getter)

.val()

gets the current value of the first element in the set of matched elements.

The return value a string containing the value of the element, or an array of strings if the element can have multiple values.

Syntax .val() (setter)

.val() setter sets the value of each element in the set of matched elements.

.val(value)
value: A string of text or an array of strings to set as the value property of each matched element
.val(function)
function: A function returning the value to set

Its return value is the jQuery object, for chaining purposes.

Set value for form input element

The following code sets value for a form input element.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--from   ww  w . j  a v  a 2s  .c om-->
           $("label + input").css("color", "blue").val("Labeled!")
        });
    </script>
  </head>
  <body>
    <body>
       <form>
        <label>Name:</label>

        <input name="name" />
        <fieldset>
          <label>Age:</label>
          <input name="age" />
        </fieldset>
      </form>

    </body>
</html>

Click to view the demo

The code above generates the following result.

.val()

Get value

The following code uses .val() function to get the input value of the first matched element


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--  w w w  .ja va  2 s .c om-->
           function displayVals() {
              var singleValues = $("#single").val();
              $("p").html(singleValues);
           }
           $("select").change(displayVals);
        });
    </script>
  </head>
  <body>
    <body>
      <p></p>
      <select id="single">
        <option>Single</option>
        <option>java2s.com</option>
      </select>
  </body>
</html>

Click to view the demo

The code above generates the following result.

.val()

Set value for input elements

The following code sets value for text field.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!-- w w  w. j a va2s . co  m-->
              $("input").removeAttr("disabled").focus().val("editable now");
        });
    </script>
  </head>
  <body>
    <body>
      <button>Enable</button>
      <input type="text" disabled="disabled" value="data"/>

  </body>
</html>

Click to view the demo

The code above generates the following result.

.val()

Set the value attribute

We can use .val() to set the value attribute of every matched element.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--from   ww  w. jav a2 s.c  o  m-->
           $("button").click(function () {
             var text = $(this).text();
             $("input").val(text);
           });
        });
    </script>
  </head>
  <body>
    <body>
      Press button to fill the text box.
      <div>
        <button>A</button>
        <button>B</button>
        <button>C</button>
      </div>
      <input type="text" value="click a button" />
  </body>
</html>

Click to view the demo

The code above generates the following result.

.val()

Set multiple value for select


<!--  ww  w  .ja  v a 2  s .  c o  m-->
<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
          $("#multiple").val(["Multiple2", "Multiple3"]);
        });
    </script>
  </head>
  <body>
    <body>
       <select id="multiple" multiple="multiple">
            <option>Multiple</option>
            <option>Multiple2</option>
            <option>Multiple3</option>
      </select>
  </body>
</html>

Click to view the demo

The code above generates the following result.

.val()

Set value to form input field


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){<!--  w w w . j  a  v a 2s .  c  o  m-->
         $("label + input").css("color", "red").val("value")
      });
    </script>
  </head>
  <body>
      <form>
        <label>Name:</label>
        <input name="name" />
        <fieldset>
          <label>Address:</label>
          <input name="newsletter" />
        </fieldset>
      </form>
      <input name="none" />
  </body>
</html>

Click to view the demo

The code above generates the following result.

.val()

Set value for form elements

checks, or selects, all the radio buttons, checkboxes, and select options


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--from  w w  w.j a  v a  2 s  . co m-->
                $("#single").val("Single2");
                $("#multiple").val(["Multiple2", "Multiple3"]);
                $("input").val(["check1","check2", "radio1" ]);
        });
    </script>
    <style>
      .selected { color:red; }
      .highlight { background:yellow; }
    </style>
  </head>
  <body>
    <body>
          <select id="single">
            <option>1</option>
            <option>2</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
    </body>
</html>

Click to view the demo

The code above generates the following result.

.val()

Get input text from Text Box


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--from  w  w  w.  j a va 2s .  co m-->
            alert($("input").val());
        });
    </script>
  </head>
  <body>
    <body>
      <button>Do</button>
      <form>
          <input type="text" />
      </form>
    </body>
</html>

Click to view the demo

The code above generates the following result.

.val()