Question

I am using jQuery .blur on ASP.NET’s Textbox controls. My jQuery code is as bellow.

Problem is if I change the focus from TextBox1 to TextBox2 or vice versa. It fires both jQuery functions. But I only want them to fire when the focus the control loose the focus. Its working fine on one TextBox. But with two or more, on focus change it fire two functions.

Any suggestions please. Thanks in advance.

Regards

 $("#MainContent_TextBox1").blur(function () {
            $.ajax({
                type: "POST",
                url: document.location.pathname + '/Test',
                data: '{name: "' + $("#MainContent_TextBox1").val() + '" }',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    alert(msg.d);
                }
            });
    });

    $("#MainContent_TextBox2").blur(function () {

            $.ajax({
                type: "POST",
                url: document.location.pathname + '/Test',
                data: '{name: "' + $("#MainContent_TextBox2").val() + '" }',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    alert(msg.d);
                }
            });
    });

ASP.NET

<asp:TextBox ID="TextBox1" runat="server" Text="Text box 1"></asp:TextBox><br />
   <asp:TextBox ID="TextBox2" runat="server" Text="Text box 2"></asp:TextBox><br />
    <asp:TextBox ID="TextBox3" runat="server" Text="Text box 3"></asp:TextBox><br />
    <asp:Button ID="Button1" runat="server" Text="Button" /><br />

Browser Source

<input name="ctl00$MainContent$TextBox1" type="text" value="Text box 1"     id="MainContent_TextBox1" class="myclass" /><br />
<input name="ctl00$MainContent$TextBox2" type="text" value="Text box 2" id="MainContent_TextBox2" class="myclass" /><br />
<input name="ctl00$MainContent$TextBox3" type="text" value="Text box 3" id="MainContent_TextBox3" class="myclass" /><br />
<input type="submit" name="ctl00$MainContent$Button1" value="Button" id="MainContent_Button1" /><br />


<script type='text/javascript'>new Sys.WebForms.Menu({ element: 'NavigationMenu',     disappearAfter: 500, orientation: 'horizontal', tabIndex: 0, disabled: false });</script>

Answer 1

Firstly i would change your code …. to simplify it use a class on the TextBox control then do :

$('.yourclass').blur(function () {
    $.ajax({
        type: "POST",
        url: document.location.pathname + '/Test',
        data: '{name: "' + $(this).val() + '" }',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            alert(msg.d);
        }
    });
});

Then you dont have to create lots and lots of blur methods !

Here is an exmaple – and on this example you can see that the blur method works fine