Validation de Formulaires Multiples avec Ajax et Jquery

Ajax et Jquery permettent de traiter une « section » de votre page Web sans recharger l’intégralité du contenu. Ainsi comme dans l’exemple qui va suivre vous pouvez valider individuellement des formulaires et afficher le résultat en conservant le reste du contenu de votre page Web.

Ce billet propose une source de code en PHP/Jquery/HTML permettant de valider un formulaire précis sur un page contenant 5, 10 ou le nombre de formulaire dont vous avez besoin sur une page Web.

Pour ce TP, vous devez posséder WAMP, et un éditeur de coloration syntaxique qui vous simplifiera la lecture de votre code. Vous pouvez consulter cet article qui vous fournira les liens de téléchargement vers différents logiciels « libre » : Meilleurs Logiciels libre sous licence GNU et GPL

resultat jquery laintimes

Précision Importante, Internet Explorer 6, 7, ou 8 pose de gros soucis. A savoir que certaine fonctionnalités Jquery ne fonctionne pas sous ces versions de IE, utilisez Firefox ou Chrome.

Pour ce TP je propose une correction disponible via Correction tpajax

Commencez par créer deux nouvelles pages via votre éditeur. Nomez les « index.php » et « traitement.php »

Nous commençons par votre page index.php

Code Jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
//Vous permet de récupérer sur les serveurs Google la version 2.0.0 de jquery
<script>
$(document).ready(function() { //attend le chargement de la page pour executer le script
$("form").submit(function () {//form désigne l'ensemble des formulaires
$.post("traitement.php",$(this).serialize(),function(texte){
//(this).serialize() récupère l'ensemble des donnés traité du formulaire EN COURS
$("div#status").append(texte);//affiche après traitement le résultat dans la div "status"
});
return false; // permet de ne pas recharger la page
});
});
</script>

Explications
Dans la construction de votre script ne pas confondre $(« form ») qui va concerner TOUT les formulaires de votre page courante et $(« #monformulaire ») qui va désigner un formulaire ayant pour ID « monformulaire ». Le « # » désigne un ID d’élément.

Formulaire HTML

<form action="traitement.php" method="post" id="test">
<input id="content1" name="content1" type="text" value="Laintimes1"></input>
<input type="submit" id="test" value="Envoyer"></input>
</form>
<BR />
<form action="traitement.php" method="post" id="test2">
<input id="content2" name="content2" type="text" value="Laintimes2"></input>
<input type="submit" id="test2" value="Envoyer"></input>
</form>
<div id="status">
//la div ou s'affichera notre résultat après traitement
</div>

PLacez vous maintenant sur votre page « traitement.php » et copiez coller ces quelques lignes pour traiter vos formulaires.

<?php
if(isset($_POST['content1'])){
echo "<p>Vous avez noté ".$_POST['content1']." dans votre Premier Formulaire</p>";}
else{
echo "<p>Votre formulaire N-1 ne contient aucun data ou n'a pas été soumis</p>";
}
if(isset($_POST['content2'])){
echo "<p>Vous avez noté ".$_POST['content2']."dans votre Deuxième Formulaire</p>";}
else{
echo "<p>Votre formulaire N-2 ne contient aucun data ou n'a pas été soumis</p>";
}
?>

Votre script est fonctionnel vous pouvez observer le traitement de l’un ou l’autre des formulaires et l’affichage dans la DIV.

Si ce billet manque de précisions faite m’en part je tacherai de modifier mes explications.

4 réflexions au sujet de « Validation de Formulaires Multiples avec Ajax et Jquery »

  2. Salut, merci beaucoup pour ce petit tuto.
    Malgré tout je me suis confronté au soucis du réenvoi du formulaire, le texte se duplique à l’intérieur de la div de status.
    Afin de remédier à ce soucis il suffit d’ajouter ceci juste avant le .append(texte) :
    $(« div#status »).empty();//vide le texte déjà affiché dans la div « status »

    Merci encore :)

    Répondre

  3. Ce tuto permet de comprendre ajax facilement contrairement aux autres tuto sur le net merci bien.
    par contre je susi débutant et je comprend pas pourquoi il n’y a pas l’utilisation de a fonction « ajax. » comme dans les autres tuto ?

    En tout cas tout ceux qui veulent un formulaire dynamique sans rechargement de page regardez ce tuto c’est nikel :D

    Répondre

Répondre à Fofi Annuler la réponse.