jQuery Tutorial

jQuery Examples

jQuery Practice

JQuery MCQs

How to set value of input text using jQuery?

In this tutorial, we'll learn how can we set the value of an input text by default using jQuery?
Submitted by Pratishtha Saxena, on July 22, 2022

For setting the value of an input text, we will use val() method of jQuery.

jQuery val() Method

It is an inbuilt method in jQuery. This method is basically used to set the value of any specified element. This element is specified by mentioning the selector like id or class. This method then sets the value of all the matched elements.

Syntax:

$(selector).val(value);

The value is set using the particular selector.

This method is not only used for setting the values but also for returning the values of the specified element. While returning the value, there is no need to specify the value attribute of the val() method.

But for now, let's see an example for setting the value of an input text.

Example:

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  </head>
  <body>
    <div class="editor-label">
      <label for="EmployeeId" style="font-weight: bold; font-size: 30px">Employee Number</label>
    </div>
    <br>
    <div class="editor-field textBoxEmployeeNumber">
      <input id="EmployeeId" name="EmployeeId" type="text"/>
      <span class="EmployeeId"></span>
    </div>
  </body>
</html>

jQuery:

<script>
    $(function () {
        $('#EmployeeId').val("0011");
    });
</script>

Output:

Example: set value of input text using jQuery