MAPG-156 add some form helper functions

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;
+        }
     }
 };