Ma fontion ne renvoie rien

Résolu

RateauMix Messages postés 74 Date d'inscription dimanche 30 novembre 2014 Statut Membre Dernière intervention 29 novembre 2017 - 31 déc. 2014 à 13:14
RateauMix Messages postés 74 Date d'inscription dimanche 30 novembre 2014 Statut Membre Dernière intervention 29 novembre 2017 - 31 déc. 2014 à 16:47

Bonjour,
J'ai commencé le Javascript et je m'attaque à la méthode AJAX, mais j'ai un problème avec "$.post" : elle ne me renvoie rien. Mon code est celui-ci :

$(document).ready(function(){
     
    $("#form form").submit(function(){
        var action      = $(this).attr('action');
        var nom         = $('#nom').val();
         
 
        $(".messages").slideUp('800', function(){
 
             
            $.post(  action, {
                nom         : nom
 
            }, function(data){
                $alert('OOO');
                $(".messages").html(data);
                $(".messages").slideDown('slow');
                 
            });
        });
         
         
        return false;
    });
     
     
});

Et mon code HTML :

<html>
 <head>
 <title>TestCCM</title>
 <link rel="stylesheet" type="text/css" href="test.css">
 </head>
 
          <body>
<div id="form">
 
    <div class="messages">
         
     
    </div>
     
    <form action="inscription_2.php" method="post">
     
    <p>
        <label for="nom">Nom</label>
        <input type="text" name="nom" id="nom">
    </p>
     
    <p>
        <input type="submit" value="Envoyer">
    </p>
    </form>
 
</div>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
                <script src="inscription_2.js"></script>
          </body>         
</html>

Un message devrait apparaître (d'une page php que j'ai créé) comme dans ce tutoriel

https://www.youtube.com/watch?v=vYXTt2lKCV8#t=588 mais rien ne se passe.

Si quelqu'un peu me dire où est l'erreur. Merci.

A voir également:

Éviter le renvoi répétitif d'un formulaire en rafraîchissant
Civilité sur un formulaire - Forum VBA Office (Excel, Word ...)
Créer un formulaire de réservation en ligne - Forum PHP
Creer un formulaire pdf depuis excel - Forum VB.NET
Créer formulaire inscription en ligne ✓ - Forum C# / .NET
"Civilité" obligatoire dans formulaire ✓ - Forum Javascript / DHTML

8 réponses

Réponse 1 / 8

jordane45 Messages postés 38157 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 4 mai 2024 344
31 déc. 2014 à 13:36

Bonjour,

Perso.. pour l'AJAX je préfère la syntaxe suivante :

(document).ready(function(){
     
  $("#form form").submit(function(){
     var action      = $(this).attr('action');
     var nom         = $('#nom').val();
     $(".messages").slideUp('800', function(){
       $.ajax({
            url : action ,
            data : "?nom="+nom,
            type : 'POST',
            dataType : 'html',
            success : function(reponse){ 
                   alert(reponse);
            },
            error : function(resultat, statut, erreur){
              alert(erreur + " - " + resultat);
            }
      });
  });         
});

Ensuite....
Si tu ne l'as pas déjà fait .. installe le plugin FireBug ( pour FireFox), lance le .. et regarde ce qu'il t'affiche dans la console lorsque tu valides ton formulaire....
Cela pourra te permettre de trouver d'où vient le PB ( erreur de syntaxe dans ton script.. ou mauvaises variables passées...)

Réponse 2 / 8

RateauMix Messages postés 74 Date d'inscription dimanche 30 novembre 2014 Statut Membre Dernière intervention 29 novembre 2017
Modifié par RateauMix le 31/12/2014 à 14:41

Salut,
Merci pour la réponse, ton code fonctionne mais FireBug ne me dit pas qu'il y a une erreur pour le mien... Je vais travailler avec le tien.

Réponse 3 / 8

jordane45 Messages postés 38157 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 4 mai 2024 344
31 déc. 2014 à 14:46

Que t'affiche la console ?
Tu devrais voir apparaitre une ligne de ce genre :

Si tu la déplies (en cliquant sur le + ) :

Tu verras ce que donnes les paramètres ...
Et tu peux aller dans l'onglet "Réponse" ou "Html" pour savoir ce qu'elle a retourné.

Mais bon.. si mon code ne t'affiche rien du tout.. même pas les alert d'erreur.. c'est que ton script ne se déclenche pas....

Ajoute des ALERT dans ton code pour savoir si on rentre bien dedans :
Par exemple :

(document).ready(function(){
     
  $("#form form").submit(function(){
   alert("Submit du formulaire !");
     var action      = $(this).attr('action');
     var nom         = $('#nom').val();
     $(".messages").slideUp('800', function(){
       alert("slideUp fini");
       $.ajax({
            url : action ,
            data : "?nom="+nom,
            type : 'POST',
            dataType : 'html',
            success : function(reponse){ 
                   alert(reponse);
            },
            error : function(resultat, statut, erreur){
              alert(erreur + " - " + resultat);
            }
      });
  });         
});

Si tu n'as toujours pas d'alert .. c'est que ça vient de la méthode d'appel de ta fonction.
Perso.. je ne fais JAMAIS de javascript sur un SUBMIT !
(le submit..étant l'envoie en PHP de ton formulaire.. pas sûr qu'il déclenche l' event javascript !)

A la limite.. remplaces ton bouton submit..

  <input type="submit" value="Envoyer">

par un bouton normal

  <input type="button" id="valider" value="Envoyer">

Et modifie l'appel à ta fonction par :

  $("#valider").click(function(){

Réponse 4 / 8

RateauMix Messages postés 74 Date d'inscription dimanche 30 novembre 2014 Statut Membre Dernière intervention 29 novembre 2017
31 déc. 2014 à 14:57

La console ne m'affiche rien du tout du tout,
quand j'utilise ton code, il m'affiche une partie du contenu de mon php (qui est

<?php 
	echo "<div class=\"error\">Veuillez remplir le formulaire</div>";
?>

) , il m'affiche : Veuillez remplir le formulaire"; ?>

jordane45 Messages postés 38157 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 4 mai 2024 344
31 déc. 2014 à 15:00

Tu as fais TOUTES les modifs dont je t'ai parlé ???
Les alertes... l'utilisation du bouton normal au lieu du submit ???

Montre ton code ainsi modifié !

RateauMix Messages postés 74 Date d'inscription dimanche 30 novembre 2014 Statut Membre Dernière intervention 29 novembre 2017
31 déc. 2014 à 15:06

Ça donne ça pour le JS (j'ai aussi fait la modif. "button" + "id="valider"" dans le HTML) :

$(document).ready(function(){
	
	$("#valider").click(function(){
		var action 		= $("#form form").attr('action');
		var nom 		= $('#nom').val();

		$(".messages").slideUp('800', function(){
			
			$('#valider').hide().after('<img src="chargement.gif" class = "chargement">');
			
		       $.ajax({
		            url : action ,
		            data : "?nom="+nom,
		            type : 'POST',
		            dataType : 'html',
		            success : function(reponse){ 
		            	$(".messages").html(reponse);
						$(".messages").slideDown('slow');
						$(".chargement").fadeOut();
						$('#valider').fadeIn();
		            },
		            error : function(resultat, statut, erreur){
		              alert(erreur + " - " + resultat);
		            }
		      });
		  });         
		
		
		return false;
	});
	
	
});

jordane45 Messages postés 38157 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 4 mai 2024 344
31 déc. 2014 à 15:09

Il manque les ALERT que j'avais ajouté un peu partout...

Essayes ça :

$(document).ready(function(){
	
	$("#valider").click(function(){
           alert("J'ai cliqué sur le bouton !");
		var action 		= $("#form form").attr('action');
		var nom 		= $('#nom').val();

		$(".messages").slideUp('800', function(){
			alert("slideup terminé !");
			$('#valider').hide().after('<img src="chargement.gif" class = "chargement">');
			
		       $.ajax({
		            url : action ,
		            data : "?nom="+nom,
		            type : 'POST',
		            dataType : 'html',
		            success : function(reponse){ 
                               alert("reponse");
		            	$(".messages").html(reponse);
						$(".messages").slideDown('slow');
						$(".chargement").fadeOut();
						$('#valider').fadeIn();
		            },
		            error : function(resultat, statut, erreur){
		              alert(erreur + " - " + resultat);
		            }
		      });
		  });         
		
		
		return false;
	});
	
	
});

RateauMix Messages postés 74 Date d'inscription dimanche 30 novembre 2014 Statut Membre Dernière intervention 29 novembre 2017
31 déc. 2014 à 15:21

Je viens d'ajouter les "alert()" et ils fonctionnent tous

jordane45 Messages postés 38157 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 4 mai 2024 344
31 déc. 2014 à 15:24

Même le "réponse" ??
Donc c'est tout bon alors.....

donc si cette ligne

$(".messages").html(reponse);

ne fonctionne pas.. c'est que tu as un souci dans ton script PHP et non plus dans ton javascript...
Fais voir le code te ta page PHP

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 8

jordane45 Messages postés 38157 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 4 mai 2024 344
31 déc. 2014 à 15:39

Tu as un "?>" en trop visiblement...
N'en aurais tu pas mis deux dans ton fichier PHP ??
Supprimes tout son contenu ( via un CTRL+A puis SUPPR ) puis recolle juste ton code :

<?php 

  echo "<div class=\"error\">Veuillez remplir le formulaire</div>";

?>

Et pour FireBug.. regarde ce que dit la CONSOLE...( tu sais... les captures écran que je t'ai mis tout à l'heure.....)
Pour la faire afficher .. clique sur l'icone en haut à droite du navigateur :

Réponse 6 / 8

RateauMix Messages postés 74 Date d'inscription dimanche 30 novembre 2014 Statut Membre Dernière intervention 29 novembre 2017
31 déc. 2014 à 15:48

J'ai copié-collé et rien de nouveau. Voilà ca que m'affiche la console :

RateauMix Messages postés 74 Date d'inscription dimanche 30 novembre 2014 Statut Membre Dernière intervention 29 novembre 2017
31 déc. 2014 à 16:09

Pour le PHP peut être qu'il s'agit du fait que je n'ai pas WAMPP ?

jordane45 Messages postés 38157 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 4 mai 2024 344
31 déc. 2014 à 16:12

bizarre....

Essayes ça ( remplace tout ton fichier html)


   <div id="form"> 
    <div class="messages">     
    </div>
    
    <form action="inscription_2.php">
    <p>
        <label for="nom">Nom</label>
        <input type="text" name="nom" id="nom">
    </p>    
    <p>
      <input type="button" id="valider" value="Envoyer">
    </p>
    </form>

<script type="text/javascript">
$(document).ready(function(){
	console.log ("************ Document READY ************");
	$("#valider").click(function(){
           console.log("J'ai cliqué sur le bouton !");
		var action = $("#form form").attr('action');
		var nom 	= $('#nom').val();

		$(".messages").slideUp('800', function(){
			console.log("slideup terminé !");
			$('#valider').hide().after('<img src="chargement.gif" class = "chargement">');
			
		       $.ajax({
		            url : action ,
		            data : "?nom="+nom,
		            type : 'POST',
		            dataType : 'html',
		            success : function(reponse){ 
                               console.log ("reponse");
		            	$(".messages").html(reponse);
				$(".messages").slideDown('slow');
				$(".chargement").fadeOut();
				$('#valider').fadeIn();
		            },
		            error : function(resultat, statut, erreur){
		              alert(erreur + " - " + resultat);
		            }
		      }); // Fin AJAX
		 }); // Fin SlideUp         
	}); // Fin  click	
// Fin document ready	
});
</script>

Cette fois.. tu devrais avoir des choses dans ta console FireBug....
Sinon.. je ne vois pas.... et il faudra alors que tu me donnes TOUT le code de ta page HTML (ta première page..avec l'import de jquery....)

Réponse 7 / 8

jordane45 Messages postés 38157 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 4 mai 2024 344
31 déc. 2014 à 16:13

Regardes aussi quelles options sont activées dans ton fireBug.
Il te faut au minimum celles là :

Réponse 8 / 8

RateauMix Messages postés 74 Date d'inscription dimanche 30 novembre 2014 Statut Membre Dernière intervention 29 novembre 2017
Modifié par RateauMix le 31/12/2014 à 16:19

Là je viens de tout activer et j'ai

jordane45 Messages postés 38157 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 4 mai 2024 344
31 déc. 2014 à 16:20

Ben tu as plein d'erreurs de code javascript ....
Il te faut d'abord les corriger....(dans ton fichier javascript.js .. inspector.js....)
par contre ne coche pas TOUT .. ne coche que les mêmes que moi.

RateauMix Messages postés 74 Date d'inscription dimanche 30 novembre 2014 Statut Membre Dernière intervention 29 novembre 2017
31 déc. 2014 à 16:21

Et là d'autres erreur rouges viennent de se rajouter.

jordane45 Messages postés 38157 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 4 mai 2024 344 > RateauMix Messages postés 74 Date d'inscription dimanche 30 novembre 2014 Statut Membre Dernière intervention 29 novembre 2017
31 déc. 2014 à 16:22

il n'y a que les ROUGES qui comptent vraiment (comme erreurs...)
Donc .. coche uniquement les même options que moi..
regarde ce que ça donne..
Si tu as encore des erreurs ( lignes rouge..) corrige les...

RateauMix Messages postés 74 Date d'inscription dimanche 30 novembre 2014 Statut Membre Dernière intervention 29 novembre 2017
31 déc. 2014 à 16:23

Ok, je vais faire ça.

RateauMix Messages postés 74 Date d'inscription dimanche 30 novembre 2014 Statut Membre Dernière intervention 29 novembre 2017
Modifié par RateauMix le 31/12/2014 à 16:30

Il ne me met que : "aucun élément trouvé ?> ---> inscription_2.php (ligne 4, col. 3)"

Discussions similaires

Éviter le renvoi répétitif d'un formulaire en rafraîchissant

Le traitement par $_POST ne renvoie Rien...

Eviter les quits en "SendQ exceeded"

[clos] éviter la redondance

Eviter le "gel" d'un form

Votre réponse

Discussions similaires