Open In App

jQuery val() Method

Last Updated : 10 Jul, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

The val() method is an inbuilt method in jQuery that is used to return or set the value of attributes for the selected elements. This method applies to the HTML form elements.

Syntax: There are three ways to use this method which are given below: 

$(selector).val()

Parameters: This method does not accept any parameters.

$(selector).val(value)

Parameters: This method accepts a single parameter value which is mandatory. It is used to specify the value of attributes.

$(selector).val(function(index,current_value))

Parameters: This method accepts a single parameter function which is optional. It contains the index position of the element and the current value attribute of the selected element.

Return Value: This method returns the selected element with specified changes made by val() method.

The below examples illustrate the val() method in jQuery:
Example 1: 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>The val Method</title>
    <script src=
    </script>
 
    <!-- jQuery code to show the working of this method -->
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("input:text").val("GeeksforGeeks!");
                $("input:text").css("color", "green");
                $("input:text").css("font-size", "40px");
                $("input:text").css("font-weight", "bold");
                $("input:text").css("font-family", "times new roman");
            });
        });
    </script>
    <style>
        div {
            background-color: lightgreen;
            padding: 20px;
            width: 41%;
            min-height: 150px;
            border: 2px solid green;
        }
 
        input {
            border: 2px solid green;
            padding-left: 15px;
            width: 350px;
            height: 80px;
        }
    </style>
</head>
 
<body>
    <div>
        <p>
            <input type="text" name="user">
        </p>
        <!-- click on this paragraph and
            see the change -->
        <button>Click Here!</button>
    </div>
</body>
 
</html>


Output: 

Example 2: This method takes two values first one for index position and the second one for the value of the attribute. No need to pass the index position, the function will automatically be set to null (n = 0), and “c” specifies the current value of the input field. 

jquery-42

html




<!DOCTYPE html>
<html>
 
<head>
    <title>The val Method</title>
    <script src=
    </script>
 
    <!-- jQuery code to show the working of this method -->
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("input:text").val(function (n, c) {
                    return c + " GeeksforGeeks!";
                });
            });
        });
    </script>
    <style>
        div {
            background-color: lightgreen;
            padding: 20px;
            width: 300px;
            height: 80px;
            border: 2px solid green;
        }
 
        input {
            border: 2px solid green;
            padding-left: 15px;
            width: 220px;
            font-weight: bold;
            height: 30px;
        }
    </style>
</head>
 
<body>
    <div>
        <p>
            <input type="text"
                   name="user"
                   value="Welcome To">
        </p>
        <!-- click on this paragraph
            and see the change -->
        <button>Click Here!</button>
    </div>
</body>
 
</html>


Output: 

jquery-43



Previous Article
Next Article

Similar Reads

Difference between html() text() and val() methods in jQuery
In this article, we are going to discuss the differences between html(), text(), and val() methods and their usage. 1. jQuery html() method: The html() method is used to set or return the inner HTML of a selected element. It works similarly to innerHTML in normal JavaScript to set or get the content of the selected element. The above code tells the
4 min read
jQWidgets jqxFormattedInput val() Method
jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful and optimized framework, platform-independent, and widely supported. The jqxFormattedInput is a jQuery input widget that is used for taking input of numbers in the binary, octal, decimal or hexadecimal format. The input number can
2 min read
jQWidgets jqxNumberInput val() Method
jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxNumberInput represents a jQuery widget that is used to add input currency, percentages, and any type of numeric data. The input data can be presented in vario
2 min read
jQWidgets jqxBarGauge val() Method
jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful and optimized framework, platform-independent, and widely supported. The jqxBarGauge represents a jQuery bar gauge widget that plots a bar gauge graph for the given values. The val() method is used to set or return the array of the
2 min read
jQWidgets jqxDateTimeInput val() Method
jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxDateTimeInput widget is a jQuery datetimeinput that is used for selecting the date or time using a displayed calendar or by using the keyboard. The val() meth
2 min read
jQWidgets jqxCheckBox val() Method
jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxCheckBox widget is used to display a checkbox that allows users to select or deselect the checkbox. The val() method is used to set or get the value of checkb
2 min read
jQWidgets jqxBulletChart val() Method
jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxBulletChart represents a jQuery bullet chart widget that features two measures, a primary one and a comparative one, and displays them in the context of a num
2 min read
jQWidgets jqxCalendar val() Method
jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful and optimized framework, platform-independent, and widely supported. The jqxCalendar represents a jQuery calendar widget that enables the user to select a date using a visual monthly calendar display. The val() method is used to se
2 min read
jQWidgets jqxComboBox val() Method
jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful and optimized framework, platform-independent, and widely supported. The jqxComboBox is used to represent a jQuery Combobox widget that contains an input field with autocomplete functionality and a list of selectable items displaye
2 min read
jQWidgets jqxTextArea val() Method
jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful and optimized framework, platform-independent, and widely supported. The jqxTextArea represents a jQuery textarea widget that is used to insert text content inside the textbox. The val() method is used to set or return the value of
2 min read