While learning any library or framework we have to know how to read and write the input value. For read and write the values in Jquery, there are 3 methods. i.e.
1. text() : used to read and write the text content of selected elements.
2. html(): used to read and write the html content of selected elements.
3. val(): Used to read and write the value of form fields.
Sample example for read the values
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../../Scripts/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#btn1").click(function () {
alert($("#test1").text());
});
$("#btn2").click(function () {
alert($("#test2").html());
});
$("#btn3").click(function () {
alert($("#test3").val());
});
});
</script>
</head>
<body>
<p id="test1">This is the simple text.</p>
<p id="test2">This is other <b>simple</b> text.</p>
<p>Input field: <input type="text" id="test3" value="Chandradev"></p>
<button id="btn1">Read Text</button>
<button id="btn2"> Read HTML</button>
<button id="btn3">Read Value</button>
</body>
</html>
Sample Example for write values
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../../Scripts/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#btn1").click(function () {
$("#test1").text("This is overrided text");
});
$("#btn2").click(function () {
$("#test2").html("<b>This is overrided html text</b>");
});
$("#btn3").click(function () {
$("#test3").val("This is overrided Name");
});
});
</script>
</head>
<body>
<p id="test1">This is the simple text.</p>
<p id="test2">This is other <b>simple</b> text.</p>
<p>Input field: <input type="text" id="test3" value="Chandradev"></p>
<button id="btn1">Write Text</button>
<button id="btn2"> Write HTML</button>
<button id="btn3">Write Value</button>
</body>
</html>
Summary:
In the both example we showed that for read text,html and form field value we have used text(),html() and val() method.
But while writing the values for text,html and form field value we passed the input parameter in text(),html() and val() method.
Chandradev's Blog 
One thought on “How to read and write Value in Jquery (Part 7)”