jQuery get and set input box value by id, name; Through this tutorial, i am going to show you how to get and set input box value by id and name using jQuery val() method.
If you want to set or get the value of HTML Elements input box, then for this you have to use the val() method of the jquery. In this tutorial, I have set and get the value of the input box using the jquery val() method by html element id and name. Also the examples are given below.
jQuery Get and Set Input box By Name, Id
- Defination of jQuery Val() method
- Syntax of jQuery Val() Method
- Parameters of jQuery val() method
- Example 1 – jQuery Set Input Box Value By Id
- Example 2 – jQuery Set Input Box Value By Name
- Example 3 – jQuery Get Input Box Value By Id
- Example 4 – jQuery Get Input Box Value By Name
Defination of jQuery Val() method
The jQuery val () method is used to get and set the value of the first element in the set of matching html elements.
Syntax of jQuery Val() Method
$(selector).val()
It can use to get value.
$(selector).val(content)
It can use to set value.
$(selector).val(function (index, currentcontent))
This can use to set value using function.
Parameters of jQuery val() method
| Parameter | Description |
|---|---|
| Value | This is a mandatory parameter. This is used specify the value of the attribute. |
| Function (index, currentvalue) | This is an optional parameter. This is used to specify a function that returns the value to set. |
Example 1 – jQuery Set Input Box Value By Id
Use the following jQuery val() method syntax to set the input box value by id:
$("#my-input").val("Hello there, this is example");
jQuery get set input box value by id; see the following example:
<!DOCTYPE html>
<html>
<title> jQuery Set Input Box Value By Id</title>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn_click").click(function(){
$("#my-input").val("Hello there, this is example");
});
});
</script>
</head>
<body>
<input type="text" id="my-input">
<br><br>
<button id="btn_click">Click here to change the content</button>
</body>
</html>
Example 2 – jQuery Set Input Box Value By Name
Use the following jQuery val() method syntax to set the input box value by name:
$('input[name="my-input"]').val("Hello there, this is example");
jQuery get set input box value by name; see the following example:
<!DOCTYPE html>
<html>
<title> jQuery Set Input Box Value By Name</title>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn_click").click(function(){
$('input[name="my-input"]').val("Hello there, this is example");
});
});
</script>
</head>
<body>
<input type="text" id="my-input" name="my-input">
<br><br>
<button id="btn_click">Click here to change the content</button>
</body>
</html>
Example 3 – jQuery Get Input Box Value By id
Use the following jQuery val() method syntax to get the input box value by id:
$('#my-input').val();
jQuery get input box value by id; see the following example:
<!DOCTYPE html>
<html>
<title> jQuery Get Input Box Value By id</title>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn_click").click(function(){
var a = $("#my-input").val();
alert(a);
});
});
</script>
</head>
<body>
<input type="text" id="my-input" value="get value by id">
<br><br>
<button id="btn_click">Click here to change the content</button>
</body>
</html>
Example 4 – jQuery Get Input Box Value By Name
Use the following jQuery val() method syntax to get the input box value by name:
$('input[name="my-input"]').val();
jQuery get input box value by name; see the following example:
<!DOCTYPE html>
<html>
<title> jQuery Set Input Box Value By Id</title>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn_click").click(function(){
var a = $('input[name="my-input"]').val();
alert(a);
});
});
</script>
</head>
<body>
<input type="text" id="my-input" name="my-input" value="get value by name ">
<br><br>
<button id="btn_click">Click here to change the content</button>
</body>
</html>