How to read and write Value in Jquery (Part 7)


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

readvalue


<!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

writevalue


<!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.

Advertisements
Posted in Jquery. 1 Comment »

One Response to “How to read and write Value in Jquery (Part 7)”

  1. Learn Jquery with in 15 hrs | Chandradev's Blog Says:

    […] 7. How to read and write Value in Jquery (Part 7) […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: