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>
.png)
No comments:
Post a Comment