esoko/mapguesser
esoko/mapguesser
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 18 Wiki Activity

MAPG-180 improve form functionality

Browse Source
This commit is contained in:
Bence Pőcze 2020-06-25 22:34:32 +02:00
parent 27115e44b6
commit e4a51c139f
1 changed files with 32 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
public/static/js/mapguesser.js
View File

@ -66,7 +66,7 @@ var MapGuesser = {
} }
}, },
setOnsubmitForForm: function (form, redirectOnSuccess) { setOnsubmitForForm: function (form) {
form.onsubmit = function (e) { form.onsubmit = function (e) {
e.preventDefault(); e.preventDefault();
@ -74,7 +74,7 @@ var MapGuesser = {
var formData = new FormData(form); var formData = new FormData(form);
var formError = form.getElementsByClassName('formError')[0]; var formError = form.getElementsByClassName('formError')[0];
var pageLeaveOnSuccess = typeof redirectOnSuccess === 'string'; var pageLeaveOnSuccess = form.dataset.redirectOnSuccess || form.dataset.reloadOnSuccess;
MapGuesser.httpRequest('POST', form.action, function () { MapGuesser.httpRequest('POST', form.action, function () {
if (!pageLeaveOnSuccess) { if (!pageLeaveOnSuccess) {
@ -92,14 +92,20 @@ var MapGuesser = {
return; return;
} }
if (this.response.redirect) {
window.location.replace(this.response.redirect.target);
return;
}
if (!pageLeaveOnSuccess) { if (!pageLeaveOnSuccess) {
formError.style.display = 'none'; formError.style.display = 'none';
form.reset(); form.reset();
} else { } else {
if (redirectOnSuccess === '') { if (form.dataset.redirectOnSuccess) {
window.location.replace(form.dataset.redirectOnSuccess);
} else if (form.dataset.reloadOnSuccess) {
window.location.reload(); window.location.reload();
} else {
window.location.replace(redirectOnSuccess);
} }
} }
}, formData); }, formData);
@ -176,15 +182,15 @@ var MapGuesser = {
document.getElementById('cover').style.visibility = 'hidden'; document.getElementById('cover').style.visibility = 'hidden';
}, },
toggleDisableOnChange: function (input, button) { observeInput: function (input, buttonToToggle) {
if (input.defaultValue !== input.value) { if (input.defaultValue !== input.value) {
button.disabled = false; buttonToToggle.disabled = false;
} else { } else {
button.disabled = true; buttonToToggle.disabled = true;
} }
}, },
toggleFormSubmitButtonDisableOnChange: function (form, observedInputs) { observeInputsInForm: function (form, observedInputs) {
for (var i = 0; i < observedInputs.length; i++) { for (var i = 0; i < observedInputs.length; i++) {
var input = form.elements[observedInputs[i]]; var input = form.elements[observedInputs[i]];
@ -192,12 +198,12 @@ var MapGuesser = {
case 'INPUT': case 'INPUT':
case 'TEXTAREA': case 'TEXTAREA':
input.oninput = function () { input.oninput = function () {
MapGuesser.toggleDisableOnChange(this, form.elements.submit); MapGuesser.observeInput(this, form.elements.submit);
}; };
break; break;
case 'SELECT': case 'SELECT':
input.onchange = function () { input.onchange = function () {
MapGuesser.toggleDisableOnChange(this, form.elements.submit); MapGuesser.observeInput(this, form.elements.submit);
}; };
break; break;
} }
@ -220,6 +226,21 @@ var MapGuesser = {
} }
} }
var forms = document.getElementsByTagName('form');
for (var i = 0; i < forms.length; i++) {
var form = forms[i];
if (form.dataset.noSubmit) {
continue;
}
MapGuesser.setOnsubmitForForm(form);
if (form.dataset.observeInputs) {
MapGuesser.observeInputsInForm(form, form.dataset.observeInputs.split(','));
}
}
document.getElementById('cover').onclick = function () { document.getElementById('cover').onclick = function () {
MapGuesser.hideModal(); MapGuesser.hideModal();
}; };