Freelance of Dev biznet
10/1/2019 - 2:21 PM

Send form with file on AJAX

Au clic sur le bouton "submit", cette fonction récupère l'ensemble des champs (y compris les fichiers), fait une requête AJAX vers un fichier PHP et affiche la réponse dans la console.

jQuery(document).ready(function(){	
  
  $('#formID').submit(function(e) {
		e.preventDefault();
		
		$('#formSubmitButtonID').prop('disabled', true); // Éviter l'envoi en double du formulaire
		
		tinyMCE.triggerSave(); // S'il y a des éditeurs TinyMCE, on déclenche l'enregistrement
		
		var form = $(this);
		var data = new FormData(form[0]); // On récupère les éléments du formulaire
		
		var request = $.ajax({ // Requête AJAX
			method: 'POST',
			url: '/wp-content/themes/starter-template/ajax.php',
			data: data,
			processData: false, // Nécessaire si le formulaire contient des fichiers
			contentType: false // De même
		})
			
		request.success(function(data) { // Si la reuqête fonctionne
			console.log(data);
		});
		
		request.always(function(data) { // A la fin de la requête (tout le temps)
			$('#form-submit').prop('disabled', false);
		});
		
		request.fail(function(data) { // Si la reuqête échoue
		});
	});
	
});