In this tutorial we will see how to Change input tag Value in jQuery. The jQuery val() method can be used to change the value of input tag.
Table of Contents
jQuery val() Method
jQuery val() Method sets or returns the value of the selected HTML elements.
In this example val() method is used to change the current value of the input tag with the new value.
HTML Code
HTML Code is given below, in this code we have one input tag and a button tag.
<!DOCTYPE html>
<html>
<head>
<title>Change input tag Value jQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<input id='input' type="text" value="Old Value">
<br><br>
<button id="btn">Change Value!</button>
<script src="script.js"></script>
</body>
</html>
JQuery Code
JQuery Code is given below, the code is executed on click of a button. jQuery click() method is used for this purpose.
While to change the value of the input tag jQuery val() method is used.
Take a look at the code given below.
<script>
$(document).ready(function(){
$('#btn').click(function(){
$('#input').val('New Value');
});
});
</script>
Demo
Video Tutorial
Watch video tutorial on How To Change input tag Value using jQuery.