.val()

Syntax for .val() (getter)

.val()

Parameters

None

Return value

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

Description

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

Syntax .val() (setter)

.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

Return value

The jQuery object, for chaining purposes.

Description

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

Examples

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){

           $("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

Get the input value of the first matched element

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
           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>Single2</option>
      </select>

  </body>
</html>

Click to view the demo

Set value for text field

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
              $("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

Set the value attribute of every matched element

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
           $("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

Set multiple value for select

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/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

Set value to form input field

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
         $("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

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

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
                $("#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

Get input text from Text Box

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
                  alert($("input").val());
        });
    </script>
  </head>
  <body>
    <body>
      <button>Do</button>
      <form>
          <input type="text" />
      </form>
    </body>
</html>

Click to view the demo