function handleSubmit(event, formName) { // Prevent naive submit event.preventDefault(); // Fetch error description element var errorDescription = document.querySelector('#error-'+formName+' .error-description'); var submitButton = document.querySelector('#'+formName+' button[type="submit"]'); // Disable button and start "Loading" state submitButton.disabled = true; submitButton.classList.remove('btn-danger'); submitButton.classList.add('btn-primary'); submitButton.innerHTML = '
Loading...'; // Fetch all input from form var fields = {}; // if(formName !== "importQuestionnaire") { $("form#" + formName).find("input, textarea, select, button[type='submit']").each(function() { var input = $(this); fields[input.attr('name')] = input.val(); }); // } else { // fields = new FormData($('#' + formName)); // https://stackoverflow.com/questions/27936645/send-input-files-data-with-ajax // } // Construct request URL (make sure to use http or https accordingly) var baseURI = document.location.protocol + "//tania.uprrp.edu/admin_nuevo/processes/"; var fullURI = baseURI; switch(formName) { // home.php case "newExperience": fullURI += "insertExperience.php"; break; // viewExperience.php case "editForm": fullURI += "updateExperience.php"; break; case "newQuestionnaire": fullURI += "insertQuestionnaire.php"; break; // case "importQuestionnaire": // fullURI += "importQuestionnaire.php"; // break; case "duplicateQuestionnaire": fullURI += "duplicateQuestionnaire.php"; break; case "newMoment": fullURI += "insertMoment.php"; break; case "newMilestone": fullURI += "insertMilestone.php"; break; // viewQuestionnaire.php case "updateQuestionnaire": fullURI += "updateQuestionnaire.php"; break; case "deleteQuestionnaire": fullURI += "deleteQuestionnaire.php"; break; case "newQuestion": fullURI += "insertQuestionToQuestionnaire.php"; break; case "deleteQuestion": fullURI += "deleteQuestion.php"; break; // viewMoment.php case "updateMoment": fullURI += "updateMoment.php"; break; case "deleteMoment": fullURI += "deleteMoment.php"; break; case "removeQuestionFromMoment": fullURI += "removeQuestionFromMoment.php"; break; case "addExistingQuestionToMoment": fullURI += "addExistingQuestionToMoment.php"; break; // Both viewMoment.php and viewQuestionnaire.php case "updateQuestion": fullURI += "updateQuestion.php"; break; // users.php case "addUser": fullURI += "addUser.php"; break default: fullURI = document.location.protocol + '//tania.uprrp.edu/admin_nuevo/test.php'; } // !!!!!! FOR DEBUGGING PURPOSES !!!!!! console.log(JSON.stringify(fields) + "\n" + fullURI); // Use fullURI to make POST request w/ jQuery, // Wait for response (start "Loading" state), // Act according to error or success // !!!!!! SHOULD ADD TIMEOUT TO REQUESTS TO !!!!!!! $.post(fullURI, fields) .done(function(data, text) { // !!!!!! FOR DEBUGGING PURPOSES !!!!!! console.log(data + "and" + text); // Fetch needed elements let alert = document.querySelector('#error-'+formName+' .alert'); let errorLead = document.querySelector('#error-'+formName+' .error-lead'); // Clear errors and change message to "Success" errorDescription.remove(); errorLead.innerText = "Success!"; errorLead.style.marginBottom = "0"; // Change alert style to "Success" alert.classList.remove('alert-danger'); alert.classList.add('alert-success'); // Change button style to "Success" submitButton.classList.remove('btn-primary'); submitButton.classList.add('btn-success'); submitButton.innerHTML = ' Success!';// could use ✔ // Reload page setTimeout(function() { let deleteForms = ["deleteQuestionnaire", "deleteMoment", "deleteExperience"]; if(deleteForms.includes(formName)) { history.back(); // go back to viewExperience page (remember we don't know the ID of the experience it came from) } else { location.reload(); } }, 250); }) .fail(function(request, status, error) { // !!!!!! FOR DEBUGGING PURPOSES !!!!!! console.log(request.responseText); console.log(status); console.log(error); // Fetch needed elements let alertContainer = document.getElementById('error-'+formName); // If response is not a JSON, or if JSON doesn't have "error" field, say so // else, dynamically update error message according to server if(!isJSON(request.responseText) || JSON.parse(request.responseText).error === undefined) { errorDescription.innerText = "Something went wrong on our side! Please try again later."; } else { errorDescription.innerText = JSON.parse(request.responseText).error; } // Change button style to "Retry" submitButton.innerHTML = "Retry"; submitButton.disabled = false; // Display alert alertContainer.style.display = "block"; }); // .always(function(data, textStatus, errorThrown) { // console.log(data); // console.log(textStatus); // console.log(errorThrown); // }); }