HTML PHP AJAX

Petit nouveau ! | 8 Messages

23 févr. 2017, 19:37

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.

Mammouth du PHP | 873 Messages

23 févr. 2017, 19:46

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

Petit nouveau ! | 8 Messages

24 févr. 2017, 11:47

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

Code : Tout sélectionner

$(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 $this = $(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: $this.attr('./contact.php'), // Le nom du fichier indiqué dans le formulaire type: $this.attr('post'), // La méthode indiquée dans le formulaire (get ou post) data: $this.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 alert(msg); // J'affiche cette réponse if (msg=="1") { $('#contactform').hide(); $('#contactform-final').show(); $('#simulation-failed').show(); } else { $('#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é'); } ); //} });

Avatar de l’utilisateur
Modérateur PHPfrance
Modérateur PHPfrance | 8755 Messages

24 févr. 2017, 12:11

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é');
  }
});
@+
Il en faut peu pour être heureux ......

Petit nouveau ! | 8 Messages

24 févr. 2017, 12:14

Merci je fais les corrections

Petit nouveau ! | 8 Messages

24 févr. 2017, 12:29

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() {

Petit nouveau ! | 8 Messages

24 févr. 2017, 12:34

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

Avatar de l’utilisateur
Modérateur PHPfrance
Modérateur PHPfrance | 8755 Messages

24 févr. 2017, 15:05

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

@+
Il en faut peu pour être heureux ......

Petit nouveau ! | 8 Messages

24 févr. 2017, 18:26

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...

Petit nouveau ! | 8 Messages

24 févr. 2017, 21:26

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

Petit nouveau ! | 8 Messages

24 févr. 2017, 22:45

Code : Tout sélectionner

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(); } },
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

Avatar de l’utilisateur
Modérateur PHPfrance
Modérateur PHPfrance | 8755 Messages

27 févr. 2017, 15:16

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

@+
Il en faut peu pour être heureux ......