JQuery Set the Value of an Input Text Field
Last Updated :
08 Oct, 2024
Set the value of an input text field in jQuery is useful while working with forms. It is used to add new value to the input text field. In jQuery, there are various methods to set the value of input text fields, these are - val(), prop(), and attr(). These method offers unique capabilities for setting the value of an input text fields.
Let us now discuss all of these methods one by one in detail with the help of code examples.
Set the Value of an Input Text Field using jQuery val() Method
The jQuery val() method is used to set or return the value of an input text field. To set a value to an input field, simply pass the desired value as a string within the method. This approach is quick and effective for updating input fields dynamically.
Syntax
$(selector).val("value_to_be_set")Example: Setting the value of an input text field using val() method by selecting the input element using its ID.
html
<!DOCTYPE HTML>
<html>
<head>
<title>
Set the Value of an Input Field using jQuery
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<label>Input Box:</label>
<input type="text" value="" id="inputField" />
<br><br>
<button id="setText">
Set Value to Input Field
</button>
<script>
$("#setText").click(function(event) {
$('#inputField').val("Welcome Geeks!");
});
</script>
</body>
</html>
Output
Set the Value of an Input Text Field using jQuery prop() Method
The prop() method is another way to set the value of an input field. This method is primarily used for properties like checked, disabled, or selected, but it can also be used to set the value property of an input field.
Syntax
$('selector').prop("value", "value_to_be_set");Example: This example explains the use of the prop() method to set the value of an input text field.
html
<!DOCTYPE HTML>
<html>
<head>
<title>
Set the Value of an Input
Field using jQuery
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<label>Input Box:</label>
<input type="text" value="" id="inputField" />
<br><br>
<button id="setText">
Set Value to Input Field
</button>
<script>
$("#setText").click(function(event) {
$('#inputField').prop("value", "Welcome Geeks!");
});
</script>
</body>
</html>
Output
Set the Value of an Input Text Field using jQuery attr() Method
The attr() method can also be used to set the value of an input field. Though it is generally used for setting attributes like id, class, and src, it can also modify the value attribute of input elements.
Syntax:
$('selector').attr("value", "value_to_be_set");Example: This example implements the attr() method to set the value of an input text field.
HTML
<!DOCTYPE HTML>
<html>
<head>
<title>
Set the Value of an Input
Field using jQuery
</title>
<script src="
https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body style="margin: 50px 0 0 50px;">
<h1>GeeksforGeeks</h1>
<label>Input Box:</label>
<input type="text" value="" id="inputField" />
<br><br>
<button id="setText">
Set Value to Input Field
</button>
<script>
$("#setText").click(function(event) {
$('#inputField').attr("value", "Welcome Geeks!");
});
</script>
</body>
</html>
Output
jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document. It is widely famous with it's philosophy of “Write less, do more". You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.
Similar Reads
Set the Value of an Input Field in JavaScript
We will learn how you can set the value of an input field in JavaScript. We will set user input to the placeholder value of the input field using JavaScript.Below are the approaches to set the value of an input field in JavaScript:Table of ContentBy using the innerHTML propertyBy using setAttribute
2 min read
How to Get the Value of an Input Text Box using jQuery?
When working with forms or interactive web pages, sometimes need to get the values entered into the input fields. This article provide a complete guide on how to get the value o an input text box using jQuery. Below are the different approaches to get the value of an input text box using jQuery:Get
2 min read
How to get the value of a textarea in jQuery ?
To get the value of a textarea in jQuery, you can use the val() method. This method is commonly used to retrieve the current value of form elements like textarea, input, and select. It works by either retrieving or setting the value of the selected element. If no input is provided, the method return
2 min read
Get the Value of Text Input Field using JavaScript
Getting the value of a text input field using JavaScript refers to accessing the current content entered by a user in an input element, such as <input> or <textarea>, by utilizing the value property. This allows for dynamic interaction and data manipulation in web forms.Syntax inputField
2 min read
How to get text value of a selected option in jQuery ?
Introduction: In this article, we will see how we can use jQuery to get the text value from the selected option. While working on some form-related user interface, we often use the select option, and to use that, we will surely need those values that are being selected. Approach: We will use select
2 min read
How to get value of textbox in jQuery ?
The purpose of this article is to demonstrate how we can get the value of textbox using jQuery. A basic understanding of HTML, CSS, and jQuery is required. This can be done by using the jQuery val() method. val() Method: This method is used to set or return the value of the attribute for the selecte
2 min read
How to make a Value/Text Input using jQuery Mobile ?
jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be creating a Value/Text Input using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=â€stylesheet†h
1 min read
How to create a Text Input using jQuery Mobile ?
jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be a Text Input using jQuery Mobile. Approach: First, we add the jQuery Mobile scripts needed for the project. <link rel=â€stylesheet†hre
1 min read
How to prevent a text field losing focus using jQuery ?
In this article, we will learn how to prevent a textfield or an input from losing focus using jQuery. This can be used in situations where user validation is required. There are two approaches that can be taken: Approach 1: We will be using the jQuery bind(), val(), preventDefault() and focus() meth
3 min read
How to detect value change on hidden input field in JQuery ?
In the <input> element with the type="hidden", the change() method of jQuery is not automatically triggered. The change() method is only triggered automatically when the user himself changes the value of the field and not the developer. When the developer changes the value inside the hidden fi
2 min read