onclick not firing after onchange

jmindrup · 01-22-2010, 12:06 AM

I have an input text with an onchange event that calls a function in which an alert box displays. I also have a button whose onclick calls a different function. If the user makes a change in the input text and immediately clicks the button, the onchange event fires, displaying the alert box, but the code in the function for the onclick of the button doesn't execute. I've read that this has something to do with event bubbling, but I haven't seen any solutions. Is there a solution? Is it even possible?

abduraooft · 01-22-2010, 08:19 AM

Quote:

Is there a solution? Is it even possible?

Posting your code may speak a lot more than what you've described.

PS: Please use [CODE][/CODE] tags to wrap your code while posting here.

Philip M · 01-22-2010, 08:44 AM

Quote:

Originally Posted by jmindrup

Is there a solution? Is it even possible?

Well, I expect there is.

You could disable the button while the onchange alert is being shown.

Code:


<input type = "text" onchange = "showAlert1()">
<input type = "button" id = "al2" value = "Click Here" onclick = "showAlert2()">

<script type = "text/javascript">

function showAlert1() {
document.getElementById("al2").value = "Disabled Right Now";
document.getElementById("al2").disabled= true;
alert ("ONE");
document.getElementById("al2").value = "Click Here";
document.getElementById("al2").disabled= false;
}

function showAlert2() {
alert ("TWO");
}
</script>

"Gordon Brown Pledges To Help Flood Devastated Cumbria" - Daily Telegraph

jmindrup · 01-22-2010, 02:29 PM

I have a textbox and a button on a web page. Im validating the value of text box on onchange event , and again when i click the button.The problem is that when i enter a value in the textbox and then directly click on submit button only the textbox's onchange event is occurring and the onclick event of the button is not getting fired.

Code:

<html>
</head>
<script language="javascript">
function validateMyText(){
alert("validating");
}
function buttonClicked(){
alert("in buttonClicked");
validateMyText();
}
</script>
</head>
<body>
<form>
<input type="text" name="myText" id="myText" 
onchange="validateMyText();"/> 
<input type="button" name="myButton"
id="myButton" onclick="buttonClicked();"/>
</form>
</body>
</html>

I understand that the alert box in the onchange handler prevents the onclick event from bubbling. Is there a workaround, or can this not be done?

Philip M · 01-22-2010, 02:34 PM

Have you bothered to read Post #3?

Kor · 01-22-2010, 03:44 PM

The logical structure is ... illogical. Why do you need to validate an input twice, first onchange, next onclick something else?

jmindrup · 01-22-2010, 03:47 PM

Philip, thanks for taking the time to respond to my question. When I initially saw your suggestion, I got the idea that maybe you weren't sure what my issue was, especially since someone else responded and asked to see my code. After posting my code and seeing your last response, I figured I would give your solution a try. It does not work. The onclick event handler showAlert2() doesn't fire if a change is made to the input value and user immediately clicks the button. thanks.

Philip M · 01-22-2010, 04:03 PM

Well, I do not understand what you are trying to do. However, I find that I did leave out part of the code in Post #3 - sorry, now corrected.

When I enter a value in the box, as soon as the box loses focus alert ONE is triggered, and the button is disabled. Once the alert is dismissed the button is re-enabled, and if clicked alert TWO shows. Surely you do not want BOTH alerts to show? If you do, simply combine the two messages.

As Kor says, "Why do you need to validate an input twice, first onchange, next onclick something else?"

At its simplest, you may not have two modal dialog boxes active at the same time.

jmindrup · 01-22-2010, 05:19 PM

Philip, I've basically cut and pasted your code into my page and the alert box from the onclick event handler doesn't display. Not sure if maybe it's a browser issue?

I gave a simplified example of what I need to do. I'm not really doing validation in both event handlers. I don't actually need an alert box to display in both the onchange and onclick event handlers. The alert box might display in the onchange event, if the input fails validation. My real problem is that I have some code in the onclick event which needs to execute every time the button is clicked. The code in the onclick event doesn't involve displaying an alert box, but instead does some basic things like change values on other components. Again, the real issue here is that the onclick event handler code does not execute if the alert box is displayed when the onchange event handler fires first.

Philip M · 01-22-2010, 05:50 PM

Well, it works for me as I have described in IE and in Firefox. In fact, I do not see how it can not work. In short, the idea is to disable the button while the onchange script is functioning. If that will not do, then I am afraid that I am right out of ideas. Abduraooft?

jmindrup · 01-22-2010, 06:49 PM

Phil, I literally cut and pasted your code into a one page .html file and when i perform the steps in this order, the onclick event doesn't fire. in other words the alert from the onclick event handler never displays. Here's the steps I'm performing:

Enter a letter into the input. Without tabbing out, immediately click the button. I see the alert box from the onchange event handler, but the alert box in the onclick event handler never displays. I suppose I'll have to look at another way of doing what I'm trying to do. Thanks again for your help.

Philip M · 01-22-2010, 08:08 PM

Quote:

Originally Posted by jmindrup

Enter a letter into the input. Without tabbing out, immediately click the button. I see the alert box from the onchange event handler, but the alert box in the onclick event handler never displays.

The button is (temporarily) disabled by the onchange event. So the alert "TWO" will only show when the button is re-enabled and clicked.

jmindrup · 01-22-2010, 09:18 PM

gotcha. It does sound like maybe I didn't explain the scenario well enough. I need for both the onchange and onclick events to fire one right after the other with the steps I described, even if an alert box is displayed in the onchange event.

Philip M · 01-23-2010, 07:57 AM

Quote:

Originally Posted by jmindrup

gotcha. It does sound like maybe I didn't explain the scenario well enough. I need for both the onchange and onclick events to fire one right after the other with the steps I described, even if an alert box is displayed in the onchange event.

Not possible. To recap, you may not have two modal dialog boxes active at the same time.

godofreality · 01-23-2010, 07:59 AM

not to mention if an alert box comes up it disrupts all scripts attempting to execute until the needed action is met in the case closing the alert box