How to append an text message when an input field is modified in jQuery ?

Last Updated : 25 Mar, 2021

In this article, we will see how to append an element with a text message when an input field is changed in jQuery. To append an element with a text message when the input field is changed, change() and appendTo() methods are used. The change() method is used to detect the change in the value of input fields. This method works only on the “<input>, <textarea> and <select>” elements. The appendTo() method is used to append the elements.

Syntax:

$($selector).change(function() { })

Here, first we use change() method to detect the changes of the input field and appendTo() method is used to display the message.

Example:

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        How to append an element with a text message
        when an input field is changed in jQuery?
    </title>

    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>

    <script>
        $(document).ready(function () {
            $("#textInput").change(function () {
                $("<p>Input text has changed.</p>")
                .appendTo("body");
            });
        });
    </script>

    <style>
        body {
            text-align: center;
        }

        h1 {
            color: green;
        }

        .clickable_ele {
            font-size: 20px;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>

    <h3>
        How to append an element with a text message
        <br>when an input field is changed in jQuery?
    </h3>

    <form action="#">
        <input id="textInput" type="text" 
            value="GeeksforGeeks">
    </form>
</body>

</html>

Output:

How to create Label hidden in Input Area using jQuery Mobile ?

vkash8574

Improve

Article Tags :

How to append an text message when an input field is modified in jQuery ?

Similar Reads

Thank You!

What kind of Experience do you want to share?