I have 2 textboxes and If I write anythng in textbox1 it should reflect immediately in textbox2 and If I write anything in textbox2 it should reflect in textbox1.
So how do I do that? I have seen this article before and how to Implement between two textboxes?
http://www.zurb.com/playground/jquery-text-change-custom-event
Here are my textboxes:
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
$('#TextBox1').keydown(function(){
$('#TextBox2').val($(this).val())
})
$('#TextBox2').keydown(function(){
$('#TextBox1').val($(this).val())
})
var $tbs = $("input[id^='TextBox']");
$tbs.keyup(function() {
var that = this;
$tbs.each(function() {
$(this).val(that.value);
});
});
The above way of referencing the textboxes won't work. ASP.NET generates some id for the server controls.
To have a relatively clean solution. I would suggest you add classes to the text boxes.
<asp:TextBox ID="TextBox1" CssClass="textbox1" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox2" CssClass="textbox2" runat="server"></asp:TextBox>
The jquery code will be as follows:
$('.textbox1').keyup(function() {
$('.textbox2').val($(this).val());
});
$('.textbox2').keyup(function() {
$('.textbox1').val($(this).val());
});
You can see an example using vanilla html at jsfiddle: http://jsfiddle.net/HUFGD/
this could be good trick
$("input[id*='txtQty']").keyup(function (event) {
var oldValue = event.target.defaultValue;
var newValue = event.target.value;
if (jQuery.trim(newValue) == "") {
alert("Quantity can't be empty");
$("input[id*='txtQty']").val(oldValue);
}
});
