Forum d'entraide PHPFrance

j'ai un fichier html dans lequel j'ai un formulaire de contact.
j'ai un fichier contact.php qui traite les données du formulaire de la page html

mon problème : je veux utiliser ajax en faisant appel a un fichier traitement.js qui envoi les données à contact.php et qui récupèrerent le resultat du contact.php pour les afficher ou cacher une DIV selon le resultat .
ex: si contact.php retourne 1 j'affiche une div d'ID Success
sinon j'affiche Div ID Failed

Merci pour votre aide.

c'est faisable en modifiant légèrement les exemples de https://api.jquery.com/jquery.post/

voici mon code JS
je ne sais pas ce qui fonctionne pas. En affichant dans le code je m'aperçois que le js ne retourne rien.
merci de votre aide

salut,

ouvre les outils de dev pour voir ce que le navigateur envoi et ce que répond php.
coté JS c'est moyen , je pense que tu n'as pas compris a quoi sert la fonction attr

ceci ne peux fonctionner si tu connais déjà les valeurs tu n'as pas besoin d'essayer de les récupérer met les directement.

juste pour info ton code JS n'est pas valide vu qu'il manque une } fermante pour la fonction success.

var $this = $(this); // L'objet jQuery du formulaire on évite this représente quelque chose.
ensuite c'est du JS pas du PHP t'es pas obligé de mettre un $

var form = $(this); // L'objet jQuery du formulaire

en gros ça peux donner ça

var form = $(this);
$.ajax({
  url: './contact.php', // Le nom du fichier indiqué dans le formulaire
  type:'post', // La méthode indiquée dans le formulaire (get ou post)
  data: form.serialize(), // Je sérialise les données (j'envoie toutes les valeurs présentes dans le formulaire)
  success: function(msg) { // Je récupère la réponse du fichier PHP
    if (msg == "1") {
      $('#contactform').hide();
      $('#contactform-final').show();
      $('#simulation-failed').show();
    } else {
      // il est pas déjà affiché ton formulaire ? :)
      $('#contactform').show();
      $('#contactform-final').hide();
      $('#simulation-failed').hide();
    }
  },
  // La fonction à appeler si la requête n'a pas abouti
  error: function() {
    // J'affiche un message d'erreur
    alert('Désolé, aucun résultat trouvé');
  }
});

@+

Merci je fais les corrections

salut,

ouvre les outils de dev pour voir ce que le navigateur envoi et ce que répond php.
coté JS c'est moyen , je pense que tu n'as pas compris a quoi sert la fonction attr

ceci ne peux fonctionner

Code : Tout sélectionner

url: $this.attr('./contact.php'), // Le nom du fichier indiqué dans le formulaire type: $this.attr('post'), //

si tu connais déjà les valeurs tu n'as pas besoin d'essayer de les récupérer met les directement.

juste pour info ton code JS n'est pas valide vu qu'il manque une } fermante pour la fonction success.

var $this = $(this); // L'objet jQuery du formulaire on évite this représente quelque chose.
ensuite c'est du JS pas du PHP t'es pas obligé de mettre un $

var form = $(this); // L'objet jQuery du formulaire

en gros ça peux donner ça

var form = $(this);
$.ajax({
  url: './contact.php', // Le nom du fichier indiqué dans le formulaire
  type:'post', // La méthode indiquée dans le formulaire (get ou post)
  data: form.serialize(), // Je sérialise les données (j'envoie toutes les valeurs présentes dans le formulaire)
  success: function(msg) { // Je récupère la réponse du fichier PHP
    if (msg == "1") {
      $('#contactform').hide();
      $('#contactform-final').show();
      $('#simulation-failed').show();
    } else {
      // il est pas déjà affiché ton formulaire ? :)
      $('#contactform').show();
      $('#contactform-final').hide();
      $('#simulation-failed').hide();
    }
  },
  // La fonction à appeler si la requête n'a pas abouti
  error: function() {
    // J'affiche un message d'erreur
    alert('Désolé, aucun résultat trouvé');
  }
});

@+

Merci Moogli, comment alors pour que lorsque je clique sur mon bouton submit du formulaire , je puisse activer le JS est ce qu'il ne faudrait pas rajouter $(document).ready( function () {
$("#contactform").submit( function() {

Je fais quelques changements et je vais vous suivre la suite.

ben repris que la partie à modifier le reste a toi de voir

@+

J'arrive pas encore :
mon fichier JS est appelé par mon formulaire html
mon fichier contact.php retourne soit 1 soit 0

normalement mon fichier JS récupère les données du formulaire HTML envoi les données au contact.php
et function(msg) affiche ou cache les div selon si msg=1 ou pas.
j'ai l'impression que lorsque je valide mon formulaire mon fichier JS ne reçoit rien...

J'ai modifié un peu le code.
le $('#contactform').hide(); marche
le problème le code $('#contactform-final').show(); semble ne pas marcher.
car le formulaire contactform-fina ne s'affiche pas.
est ce le prb de show();? qu'est ce qu'il faut faire pour afficher un DIV ou un formulaire

Dance ce code lorsque je fait alert(msg) je reçois tout une page html alors que mon fichier contact.php me retourne echo "1" ou "0".
c'est pour cela que mon if ne s'execute pas. Comment faire pour que msg contienne uniquement 1 ou 0 et pas la page entière?
Merci

salut,

as tu regarder la doc de jQuery ? => https://api.jquery.com/jQuery.ajax/
as tu ouvert l"outils développeur pour regarder ce que fait la requête serveur (onglet network) ?

script fonctionnel

<!Doctype html>
<html>
<head>
  <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
  <script type="text/javascript">
$(document).ready(function() {
    // Lorsque je soumets le formulaire
    $('#contactform').on('submit', function(e) {
        e.preventDefault(); // J'emp�che le comportement par d�faut du navigateur, c-�-d de soumettre le formulaire

        var form = $(this); // L'objet jQuery du formulaire

        // Je r�cup�re les valeurs
       var nom = $('#nom').val();
        var prenom = $('#prenom').val();

        // Je v�rifie une premi�re fois pour ne pas lancer la requ�te HTTP
        // si je sais que mon PHP renverra une erreur
       if( nom === '' || prenom === '') {
        alert('Les champs doivent �tres remplis');
        } else {
            // Envoi de la requ�te HTTP en mode asynchrone
            $.ajax({
              url: './contact.php', // Le nom du fichier indiqu� dans le formulaire
              method:'post', // La m�thode indiqu�e dans le formulaire (get ou post)
              data: {nom:nom,prenom:prenom},
              success: function(msg) { // Je r�cup�re la r�ponse du fichier PHP
                if (msg == "1") {
                  $('#contactform').hide();
                  $('#contactform-final').show();
                  $('#simulation-failed').show();
                } else {
                  // il est pas d�j� affich� ton formulaire ? :)
                  $('#contactform').show();
                  $('#contactform-final').hide();
                  $('#simulation-failed').hide();
                }
              },
              error: function() {
                  // J'affiche un message d'erreur
                  alert('D�sol�, aucun r�sultat trouv�');
              }
          });
      }
    });
});
  </script>
    </head>
    <body>
    <form id="contactform">
    name : <input id="nom"><br />
    firstname : <input id="prenom"/><br/>
    <input type="submit" value="clic me baby"/>
    </form>

    <div id="contactform-final" style="display:none">
    <h1>contactform-final</h1>
    </div>

    <div id="simulation-failed" style="display:none">
    <h1>simulation-failed</h1>
    </div>
    </body>
    </html>

je te conseil quand même de (re)voir des tutos sur le sujet, en copiant la doc cela fonctionne

@+