ansaurus

Question

button click event lost due to the alert box in text box onblur event

Answer 1

+4 A:

A "click" of a button has two parts, mouse down and mouse up. When you mouse down on the button, it gains focus - blurring the text box and firing your alert. Since alert dialogs are modal, they halt all activity on the page so the button doesn't detect the mouse up and your click doesn't complete.

It could be possible to work around your issue using a timer within the blur event, and cancelling that timer within the mousedown event of the button:

var timer;
function onTextBoxBlur()  
{  
    timer = window.setTimeout(function () { alert("On blur"); }, 0);  
    return true;  
}  

function onButtonMouseDown()
{
    clearTimeout(timer);
}

Andy E 2010-07-14 10:49:20

is there any workarround for this?

Vinod T. Patil 2010-07-14 11:44:56

@Vinod T.Patil: not really. The only "workaround" would be to wait until the click completes or avoid using `alert`.

Andy E 2010-07-14 11:52:48

one way is to, explicitly call button click, like document.getElementById("Button1").click();, after alert. It works. But, it is ok for such sample application, in practical there can be other textboxes on the form and in that case I wouldn't want button click to be fired immediately after I leave the first textbox.

Vinod T. Patil 2010-07-14 12:37:02

A problem that can arise by explicitly calling the button click after the alert is if the user didn't actually click the button. The on blur can happen for all sorts of reasons, such as clicking the background away from the textbox and the button. Maybe it even happens when you click away from the browser? An event like OnBlur is too generic to be calling other functions like this.

Corey Ogburn 2010-07-14 15:51:25

@Corey Ogburn, exactly that is what i wanted to mention

Vinod T. Patil 2010-07-15 05:17:20

@Vinod: I thought about a "workaround" and updated my post.

Andy E 2010-07-15 11:55:17

Answer 2

+1 A:

Write a function and give a call to function from button's mousedown and onClick Events

SachinS 2010-07-14 15:40:06

Answer 3

A:

Got it.... I got it working...

Adding explicit call to the button's click in onblur event is not correct, because onblur event can happen any time, like when user move to other text box or click anywhere in the form etc. (as mentioned by Corey Ogburn in comments above). So the button click would be fired though the user didn't actually clicked the button.

So, in onblur event there should be a way to identify that the submit is being clicked and if it is then fire the button's click explicitly. Here is the code,

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <script language="javascript" type="text/javascript">
    var clicked = 0;

    function onTextBoxBlur()
    {   
        alert("On blur " + clicked);      

        if(1 == clicked)
        {
           clicked = 0;
           document.getElementById("Button1").click();
        }

        return true;
    }
    function SubmitButtonClicked()
    {
        clicked = 1;
    }
    </script>
</head>
<body>
    <form id="form1" runat="server" >
    <div>

    </div>
    <asp:TextBox ID="TextBox1" runat="server" onfocusout="onTextBoxBlur();"></asp:TextBox>
    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
    <asp:Button ID="Button1" runat="server" Text="Button" onmousedown="SubmitButtonClicked();" />    
    </form>
</body>
</html>

Here, on mousedown event of the button, which occurs before onblur of the text box, I have set a value to flag clicked and in onblur of the textbox, now I can identify if the button is being clicked or not.

But, again this is just a workarround and OK for such sample application :). It is less feasible in practical because there can be more such submit buttons on the webform and we will have to fire click event of all such buttons (links etc.) in onblur event of the textbox. This is because, user can click on any of the submit buttons (links etc.) after entering data into the textbox and alert/confirm in onblur is going to supress those click events. Hope I am clear.

Enjoy!!!

Vinod T. Patil 2010-07-15 05:57:16

ansaurus

tags:

views:

answers:

button click event lost due to the alert box in text box onblur event

related questions