Button onclick doesn't fire after onchange input-field when user immediately clicks the button

Question

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")

Answer 1

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.net/5rTLq

Answer 2

how about this

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

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

test: http://jsfiddle.net/C3jRr/2/