CODEWITHSUNDEEP
javascriptforms
NickC
NickC

Reputation: 1363

Timing issue with form.submit()

Seem to have a timing issue when submitting a form that the submit() does not run immediately and the next few lines of Javascript get run before the form is actually submitted.

var eButtons = document.querySelector("#ContactUs_form #buttons");

function submitForm() {
document.getElementById("ContactUs_form").submit();
	eButtons.origInnerHtml = eButtons.innerHTML;
	eButtons.innerHTML = "Saving form...";
}
<form id="ContactUs_form" method="post" action="ContactUs.php" onsubmit="submitForm();">
	<div id="buttons">
		<input id="btnSubmit" name="btnSubmit" type="submit" value="Submit" class="fLeft">
		<input id="btnReset" name="Reset" type="reset" value="Reset" class="fRight">
	</div>
</form>

Any ideas why the submit() is not submitting the form immediately?

Edit: Should have explained more fully, the form is getting submitted but not immediately. The eButtons.innerHTML replacement occurs before the form is submitted so when the form does eventually get submitted is does not contain the $_POST("btnSubmit") which it should do.

Upvotes: 0

Views: 52

Answers (1)

Quentin
Quentin

Reputation: 943578

JavaScript blocks everything. The browser won't repaint the DOM, run another function (e.g. in response to an event) or navigate to a new page until the current function has finished executing.

Any navigation is asynchronous anyway. The browser has to wait until the response starts arriving in case the server says 204 No Content. Only after it gets a response with a new page will the page unload begin.

Upvotes: 1

Related Questions