function formSubmitFunc(form) { return function(e){ e.preventDefault(); e.stopPropagation(); e.returnValue = false var xhr = new XMLHttpRequest(); var stat = document.getElementById(form.getAttribute("name") + "-status"); stat.classList.add("hide"); xhr.addEventListener("load", function(e){ if (xhr.status == 200) { stat.innerHTML = "

Form submitted!

"; } else { stat.innerHTML = "

Error occurred while processing form.

" + xhr.responseText + "

" } stat.classList.remove("hide"); }); xhr.addEventListener("error", function(e){ stat.innerHTML = "

A server error occurred. The form was not submitted. Please try again later.

" stat.classList.remove("hide"); }); // Use "action" and not "data-action" for cases of no javascript xhr.open("POST", form.getAttribute("action")); var data = new FormData(form); xhr.send(data); return false } } var forms = document.getElementsByTagName("form"); for (var i = 0; i < forms.length; i++) { var form = forms[i]; var submit = document.getElementById(form.getAttribute("name") + "-submit"); submit.addEventListener("click", formSubmitFunc(form)); }