Asp.net : Live preview of Text typed in textbox using Jquery | ASPMANTRA | Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server AND WCF 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>


Post a Comment

[blogger]

MKRdezign

Contact Form

Name

Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget