Text change events in jquery with Asp.net

Question

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>

Answer 1

$('#TextBox1').keydown(function(){
    $('#TextBox2').val($(this).val())
})
$('#TextBox2').keydown(function(){
    $('#TextBox1').val($(this).val())
})

Answer 2

var $tbs = $("input[id^='TextBox']");
$tbs.keyup(function() {
    var that = this;
    $tbs.each(function() {
       $(this).val(that.value);
    }); 
});

Demo: http://jsfiddle.net/SGcEe/2/

Answer 3

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/

Answer 4

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);
        }
    });