Asp.net : Live preview of Text typed in textbox using Jquery - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

Asp.net : Live preview of Text typed in textbox using Jquery

In this article I am going to explain how to show live preview of text typed/enter in textbox using jquery.

Description:
I want to show the preview of text while type in textbox. I am using jquery

Implementation:
I have create Jquery function. On keyup function preview will be show.

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
            <script type="text/javascript">
                $(document).ready(function () {
                    // preview text name          
                    $('#txtname').keyup(function () {
                        var title = $(this).val();
                        $('#name').text(title);
                    });
                    // preview text phone
                    $('#txtphone').keyup(function () {
                        var title = $(this).val();
                        $('#phone').text(title);
                    });
                    // preview text email  
                    $('#txtemail').keyup(function () {
                        var title = $(this).val();
                        $('#email').text(title);
                    });
                });
            </script>


Complete HTML Markup of Webform:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
            <script type="text/javascript">
                $(document).ready(function () {
                    // preview text name          
                    $('#txtname').keyup(function () {
                        var title = $(this).val();
                        $('#name').text(title);
                    });
                    // preview text phone
                    $('#txtphone').keyup(function () {
                        var title = $(this).val();
                        $('#phone').text(title);
                    });
                    // preview text email  
                    $('#txtemail').keyup(function () {
                        var title = $(this).val();
                        $('#email').text(title);
                    });
                });
            </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>         
        <table>
            <tr>
                <td>Name :</td>
                 <td><asp:TextBox ID="txtname" runat="server" placeholder="Name"></asp:TextBox></td>
            </tr> 
               <tr>
                <td>Phone No. :</td>
                 <td><asp:TextBox ID="txtphone" runat="server" placeholder="Phone"></asp:TextBox></td>
            </tr> 
            <tr>
                <td>Email :</td>
                 <td><asp:TextBox ID="txtemail" runat="server" placeholder="Email"></asp:TextBox></td>
            </tr>  
        </table> 
        <table id="preview">
            <tr>
                <td>Name :</td>
                 <td id="name"></td>
            </tr>
             <tr>
                <td>Phone No.:</td>
                 <td id="phone"></td>
            </tr>
             <tr>
                <td>Email :</td>
                 <td id="email"></td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>


What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon