I have a contact form with a submit button. I am using JQuery to do the following in exactly the following order once a response is received from the server-side PHP that processes the submitted data:

1. Change button text to "Send"
2. Display the received response in an alert

The code is straightforward:

submit_button.text('Send');
alert(response);

However, the alert() always seems to trigger before the text change no matter what. Is this by design? Any trick to alter the sequence? I need the button's text to change before the alert is displayed. I even tried the following in vain:

submit_button.text('Send');
if(submit_button.text() == 'Send') { alert(response); }

I'm sorry if this question has already been answered elsewhere and request you to point me in the right direction should that be the case.

I have a contact form with a submit button. I am using JQuery to do the following in exactly the following order once a response is received from the server-side PHP that processes the submitted data:

1. Change button text to "Send"
2. Display the received response in an alert

The code is straightforward:

submit_button.text('Send');
alert(response);

However, the alert() always seems to trigger before the text change no matter what. Is this by design? Any trick to alter the sequence? I need the button's text to change before the alert is displayed. I even tried the following in vain:

submit_button.text('Send');
if(submit_button.text() == 'Send') { alert(response); }

I'm sorry if this question has already been answered elsewhere and request you to point me in the right direction should that be the case.

• javascript
• jquery

• why would you need to use a native alert in the first place? Please provide a minimal reproducible example – charlietfl Commented Jan 30, 2017 at 12:36
• The alert is there to tell the user if the email was sent and why if not. The prototype is live at peppyburro./sandboxindex if you need to see it live. Just click HELP->CONTACT US from the navbar menu. – TheLearner Commented Jan 30, 2017 at 12:37
• Possible duplicate of why does this alert fire before earlier code has finished executing? – Vaibhav Kumar Commented Jan 30, 2017 at 12:38
• check this stackoverflow./questions/16082452/… – Vaibhav Kumar Commented Jan 30, 2017 at 12:39
• 1 Possible duplicate of Javascript alert box shows up before executing previous statement – insertusernamehere Commented Jan 30, 2017 at 12:56

4 Answers 4

You can wrap your alert call into a setTimeout call, that will put the alert call at the end of the event loop and will give time for the browser to update the DOM first.

submit_button.text('Send');
setTimeout(function () { alert(response); }, 1);

FIDDLE: https://jsfiddle/sn9cbqz3/3/

The problem is that the script continues without giving DOM the time to update. You can use setTimeout to achieve what you want:

submit_button.text('Send');
setTimeout(function(){
      alert(response);
},10);

I think this can be solved with a setTimeout to allow the browser to plete the thread and repaint, before the alert is triggered, like this...

submit_button.text('Send');
setTimeout(function() {alert(response);},0);

As respondent in Javascript alert box shows up before executing previous statement

Changes in the browser doesn't show up as long as your Javascript code is running.

The browser is event driven, so changing an element in the DOM doesn't show the change immediately, instead an event is triggered to redraw the element. When your function has finished running, the browser will handle any pending events and show the changes.

So, when building an application, you have to use the same approach so that the browser has a chance to show the changes. By Guffa

The timeout suggestions are pretty much your best bet.

submit_button.text('Send');
setTimeout(function () { alert(response); }, 1);

Suggested by Rik Lewis