webAdministracion/js/handleSubmit.js

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 = '<div class="loader"></div>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 = '<span class="glyphicon glyphicon-ok"></span> Success!';// could use &#10004;


			// 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);
// 		});

}