diff --git a/public/static/js/mapguesser.js b/public/static/js/mapguesser.js index 0af777a..c0078e4 100644 --- a/public/static/js/mapguesser.js +++ b/public/static/js/mapguesser.js @@ -15,7 +15,7 @@ var MapGuesser = { document.head.appendChild(script); window.dataLayer = window.dataLayer || []; - function gtag(){dataLayer.push(arguments);} + function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', GOOGLE_ANALITICS_ID); }, @@ -66,6 +66,46 @@ var MapGuesser = { } }, + setOnsubmitForForm: function (form, redirectOnSuccess) { + form.onsubmit = function (e) { + e.preventDefault(); + + document.getElementById('loading').style.visibility = 'visible'; + + var formData = new FormData(form); + var formError = form.getElementsByClassName('formError')[0]; + var pageLeaveOnSuccess = typeof redirectOnSuccess === 'string'; + + MapGuesser.httpRequest('POST', form.action, function () { + if (!pageLeaveOnSuccess) { + document.getElementById('loading').style.visibility = 'hidden'; + } + + if (this.response.error) { + if (pageLeaveOnSuccess) { + document.getElementById('loading').style.visibility = 'hidden'; + } + + formError.style.display = 'block'; + formError.innerHTML = this.response.error.errorText; + + return; + } + + if (!pageLeaveOnSuccess) { + formError.style.display = 'none'; + form.reset(); + } else { + if (redirectOnSuccess === '') { + window.location.reload(); + } else { + window.location.replace(redirectOnSuccess); + } + } + }, formData); + } + }, + showModal: function (id) { document.getElementById(id).style.visibility = 'visible'; document.getElementById('cover').style.visibility = 'visible'; @@ -142,6 +182,30 @@ var MapGuesser = { } else { button.disabled = true; } + }, + + toggleFormSubmitButtonDisableOnChange: function (form, observedInputs) { + for (var i = 0; i < observedInputs.length; i++) { + var input = form.elements[observedInputs[i]]; + + switch (input.tagName) { + case 'INPUT': + case 'TEXTAREA': + input.oninput = function () { + MapGuesser.toggleDisableOnChange(this, form.elements.submit); + }; + break; + case 'SELECT': + input.onchange = function () { + MapGuesser.toggleDisableOnChange(this, form.elements.submit); + }; + break; + } + } + + form.onreset = function () { + form.elements.submit.disabled = true; + } } };