jQuery val() function examples



jQuery val() function is used to get the current value of the first element in the set of matched elements or set the value of every matched element.

Example 1

Get the single value from a single select and an array of values from a multiple select and display their values.
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>val demo</title>
    <style>
        p {
            color: red;
            margin: 4px;
        }

        b {
            color: blue;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.4.1.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() || [];
            // When using jQuery 3:
            // var multipleValues = $( "#multiple" ).val();
            $("p").html("<b>Single:</b> " + singleValues +
                " <b>Multiple:</b> " + multipleValues.join(", "));
        }

        $("select").change(displayVals);
        displayVals();
    </script>

</body>

</html>
Try it Yourself - Copy paste code in Online HTML Editor to see the result

Example 2

Find the value of an input box.
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>val demo</title>
    <style>
        p {
            color: blue;
            margin: 8px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.4.1.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>
Try it Yourself - Copy paste code in Online HTML Editor to see the result

Example 3 - Set the value of an input box

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>val demo</title>
    <style>
        button {
            margin: 4px;
            cursor: pointer;
        }

        input {
            margin: 4px;
            color: blue;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.4.1.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>
Try it Yourself - Copy paste code in Online HTML Editor to see the result

Example 4

Set a single select, a multiple select, checkboxes and a radio button:
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>val demo</title>
    <style>
        body {
            color: blue;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.4.1.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>
Try it Yourself - Copy paste code in Online HTML Editor to see the result

Comments