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?

Here is a little example:

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

<script type = "text/javascript">

function showAlert1() 
{
    alert("ONE")
}

function showAlert2() 
{
    alert ("TWO");
}

</script>

The onclick event handler showAlert2() doesn't fire if a change is made to the input value and user immediately clicks the button. I want, that you write something to the input-field, click IMMEDIATELY the button and it fires

alert("ONE") AND alert("TWO")...

OR ONLY

alert("TWO")

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?

Here is a little example:

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

<script type = "text/javascript">

function showAlert1() 
{
    alert("ONE")
}

function showAlert2() 
{
    alert ("TWO");
}

</script>

The onclick event handler showAlert2() doesn't fire if a change is made to the input value and user immediately clicks the button. I want, that you write something to the input-field, click IMMEDIATELY the button and it fires

alert("ONE") AND alert("TWO")...

OR ONLY

alert("TWO")

• javascript
• events
• click
• onchange

Share Follow edited Nov 18, 2021 at 8:15 Jun Yu 42411 gold badge88 silver badges2222 bronze badges asked Jun 16, 2011 at 12:41 ezebemmelezebemmel 4,79122 gold badges1818 silver badges77 bronze badges 2

• tried keyUp or keyDown instead of onChange? – Max Commented Jun 16, 2011 at 12:44
• can't you use the event onkeyup – Grumpy Commented Jun 16, 2011 at 12:53

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

As far as I can tell it's not a problem with bubbling (which is a problem with onchange but is a red herring in this case). The problem is that clicking the button after changing the field value is triggering blur, causing showAlert1() to run before the button's onclick gets triggered.

Here's a quick example of it working the way you described but you'll see it's an unreliable hack more than anything. Basically it buffers the execution of each function so that the button's onclick can be triggered. However it falls over if you click and hold the button longer than the buffer that is set within each function via setTimeout().

function showAlert1() {
    setTimeout(function(){ alert("ONE") }, 250);
}

function showAlert2() {
    setTimeout(function(){ alert("TWO") }, 250);
}

Demo: jsfiddle/5rTLq

how about this

function showAlert1(a) {
    alert(a.value); /* use setTimeout to delay */
}

function showAlert2() {
    alert(document.getElementById('txt').value);
}

test: http://jsfiddle/C3jRr/2/