I recently saw a question on the forums where a user wanted to clone the value of a textbox contents into another, as he typed in it. Here’s how to achieve this requirement:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Clone the Value of a TextBox as the User Types in it</title>
<script src="http://code.jquery.com/jquery-latest.js"
type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#tb1").keyup(function() {
var txtClone = $(this).val();
$("#tb2").val(txtClone);
});
});
</script>
</head>
<body>
<input id="tb1" type="text" />
<input id="tb2" type="text" />
</body>
</html>
To do it an ASP.NET Page
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Clone the Value of a TextBox as the User Types in it</title>
<script type='text/javascript'
src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js'>
</script>
<script type="text/javascript">
$(function() {
$('input[id$=tb1]').keyup(function() {
var txtClone = $(this).val();
$('input[id$=tb2]').val(txtClone);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="tb1" runat="server" /><br />
<asp:TextBox ID="tb2" runat="server" />
</div>
</form>
</body>
</html>
Observe how I am using ('input[id$=tb1]' in an ASP.NET page. Using this technique makes it easy to find a control in a MasterPage scenario.
See a Live Demo
Tweet
About The Author
No comments:
Post a Comment