Créer un formulaire sans rechargement de page avec jQuery.ajax()
Pour créer notre formulaire, nous allons créer 3 fichiers :
- Le fichier HTML
index.htmlqui contiendra le formulaire - Le fichier JS
form-contact.jsqui se charge d’exécuter une requête HTTP asynchrone (et donc d’exécuter notre fichier PHP sans changer de page) - Le fichier PHP
form-contact.phpqui se charge de vérifier les données du formulaire, de traiter les données et de renvoyer la réponse.
Veillez à ne pas oublier d’appeler la librairie JQuery depuis votre fichier HTML, comme indiqué dans l’exemple ci-dessous. (Lire aussi : Comment inclure jQuery de manière optimisée de AlsaCréation)
Créer le formulaire sur votre fichier HTML (index.html)
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Formulaire</title> </head> <body> <form id="form-contact"> Nom : <input type="text" id="nom" name="nom"><br> Email : <input type="text" id="email" name="email"><br> Message : <input type="text" id="message" name="message"><br> <button id="form-contact-submit" type="submit">Envoyer</button> </form> <div id="warning"></div> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script type="text/javascript" src="form-contact.js"></script> </body> </html>
Créer le traitement en Javascript et JQuery (form-contact.js)
Notez qu’avec cette méthode, vous pouvez également traiter des uploads de fichiers !
$(document).ready(function() {
$('#form-contact-submit').on('click', function() {
var form = $('form').get(0);
var formData = new FormData(form); // Toutes les données du formualaire
// Message qui s'affiche pendant le traitement du formulaire :
$('#warning').html("Veuillez patienter pendant le traitement de votre demande") ;
$.ajax({
url: 'form-contact.php', // chemin du fichier PHP à éxécuter
type: 'POST',
data: formData, // Les données
processData: false,
contentType: false,
success: function(ret) {
var obj = jQuery.parseJSON(ret);
$('#warning').html(obj.textRetour) ; // Message de confirmation ou d'erreur
if (obj.codeRetour == 1)
{
// Actions une fois le formulaire soumis avec succès
// Par exemple, ici on vide les champs du formulaire :
$('#nom').val('') ;
$('#message').val('') ;
$('#email').val('') ;
}
}
});
return false;
});
});
Créer le fichier de traitement en PHP (form-contact.php)
Je ne détaille pas le traitement du formulaire en lui-même (vérification des champs obligatoires, de la validité de l’adresse e-mail, de l’envoi d’un mail à l’administrateur du site, du stockage dans la base de donnée…), mais vous pouvez inclure tous les traitements désirés : il suffira de traiter vos valeurs $_POST (et $_FILES si vous envoyez également des fichiers).
Votre fichier doit retourner un tableau :
codeRetour = 0 en cas d’échec ou 1 en cas de succès
textRetour = le texte qui s’affichera dans la div « warning » de votre fichier HTML.
// Inclure ici votre vérification et le traitement de votre formulaire (envoi par email, stockage dans la base de donnée, etc.)
return array('codeRetour' => 1, 'textRetour' => 'Merci, votre demande a bien été prise en compte ) ; // succès
Si cet article vous a aidé, si vous avez des questions ou des améliorations à proposer, n'hésitez pas à me laisser un commentaire en bas de page !
