LearnFast.Ninja

jQuery change html of div when text change

Create div element and input text element with on key up event that call JavaScript function. Write the jQuery code in the JavaScript function. At the working example code we change the text of the div when the user write text at the text input. Note you can give id to some other element and write to it with the same process.

Step 1: Create div element and input text element with on key up event that call JavaScript function.

<input type="text" name="name" value=" " onkeyup="onChange()" />

<div></div>


Step 2: Write the jQuery code in the JavaScript function.

function onChange() {

    $("div").html($("input").val());

}


Working Example:

<html>

<head>

    <title>jQuery</title>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>

    <!-- The Code - START -->

    <script type="text/javascript">

        function onChange() {

            $("div").html($("input").val());

        }

    </script>

    <!-- The Code - END -->

</head>

<body>

    <input type="text" name="name" value=" " onkeyup="onChange()" />

    <div></div>

</body>

</html>

<html>

<head>

    <title>jQuery</title>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>

    <!-- The Code - START -->

    <script type="text/javascript">

        function onChange() {

            $("div").html($("input").val());

        }

    </script>

    <!-- The Code - END -->

</head>

<body>

    <input type="text" name="name" value=" " onkeyup="onChange()" />

    <div></div>

</body>

</html>


Result:


Tags

jquery

input-text keypress