IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

AJAX Discussion :

[AJAX] Soumettre plusieurs fomulaires dans différentes div


Sujet :

AJAX

  1. #1
    Membre habitué
    Homme Profil pro
    Développeur Web
    Inscrit en
    Avril 2014
    Messages
    253
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 43
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Avril 2014
    Messages : 253
    Points : 164
    Points
    164
    Par défaut [AJAX] Soumettre plusieurs fomulaires dans différentes div
    Bonjour,

    J'ai un programme constitué d'une page principale contenant 2 div dans lesquelles s'affichent respectivement des formulaires form1 (div1) et form2 (div2)
    Lorsque l'utilisateur valide le premier formulaire form1 le formulaire s'exécute par la fonction :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
     
    function ShowPage2(page,formulaire,sortie)
    {
     
    var formElement = document.getElementById(formulaire);	
     
    document.getElementById('wait').innerHTML="Page en cours de chargement...";
    getXhr();
    xhr.onreadystatechange = function()
        {
         if(xhr.readyState == 4 && xhr.status == 200)
         {
         document.getElementById(sortie).innerHTML=xhr.responseText;
         document.getElementById('wait').innerHTML="";     
    	alert('ok');     
         }
        }
    xhr.open("POST",page,true);
    xhr.send(new FormData(formElement));
     
    }
    et le résultat de ce formulaire est un autre formulaire form2 qui va s'afficher dans le div2.

    Lorsque l'utilisateur valide div2 on appelle la même fonction qui doit afficher le résultat dans la div1.
    Le problème arrive à ce moment là car apparemment les données du formulaire form2 sont vides, donc le deuxième appel de cette fonction ne renvoie pas les résultats attendus puisque le formulaire form2 est considéré comme vide.
    Y a t il une explication ?
    y a t il une autre méthode pour transmettre des formulaires lorsqu'il y en a plusieurs qui s'affichent successivement sur une même parge ?

  2. #2
    Membre confirmé Avatar de freddou17
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Avril 2013
    Messages
    341
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Sarthe (Pays de la Loire)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : Service public

    Informations forums :
    Inscription : Avril 2013
    Messages : 341
    Points : 566
    Points
    566
    Par défaut
    Salut as tu essayé de remplacer
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
     
    document.getElementById(sortie).innerHTML=xhr.responseText;
    // par 
     
    document.getElementById(sortie).innerHTML=xhr.responseXml;

    ++
    "Aucun de nous ne sait ce que nous savons tous, ensemble."
    Lien vers mon appli Funcash n'hésitez pas à donner votre avis

  3. #3
    Membre habitué
    Homme Profil pro
    Développeur Web
    Inscrit en
    Avril 2014
    Messages
    253
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 43
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Avril 2014
    Messages : 253
    Points : 164
    Points
    164
    Par défaut
    Bonjour,


    le problème vient du fait qu'en passant d'une div à l'autre et au fur et à mesure que des requêtes javascript affichent ces formulaires dans les div 1 ou div2, au bout du 3eme formulaire cette fonction ne fonctionne plus mais les 2 premières fois celle-ci fonctionne bien j'arrive à poster le formulaire complet en résumé...
    De plus la réponse http n'est pas en XML.

  4. #4
    Membre confirmé Avatar de freddou17
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Avril 2013
    Messages
    341
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Sarthe (Pays de la Loire)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : Service public

    Informations forums :
    Inscription : Avril 2013
    Messages : 341
    Points : 566
    Points
    566
    Par défaut
    ok... peux tu mettre le code html qui appelle ta fonction ajax ainsi que le résultat d'un alert(responseText).

    ++
    "Aucun de nous ne sait ce que nous savons tous, ensemble."
    Lien vers mon appli Funcash n'hésitez pas à donner votre avis

  5. #5
    Membre habitué
    Homme Profil pro
    Développeur Web
    Inscrit en
    Avril 2014
    Messages
    253
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 43
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Avril 2014
    Messages : 253
    Points : 164
    Points
    164
    Par défaut
    Bonjour,

    Le code HTML qui appelle la fonction est inclus dans un fichier php qui génère donc ceci :
    Ayant testé 50 codes différents je vous donne celui qui marche le mieux pour le premier appel de la fonction qui retourne ceci dans la div N°1 :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    echo "
    <form enctype=\"multipart/form-data\"  id=\"form1\" name=\"form1\" method=\"post\" onsubmit=\"ShowPage2('page1.php','form1','div2'); return false;\" >";
    //echo le reste du formulaire
     
    echo "<input type=\"submit\" value=\"valider\" ></input><input type=\"reset\" value=\"Annuler\" ></input></form>";
    La fonction alert() de ShowPage2 fonctionne bien.

    Une fois ce premier formulaire validé la div N°2 affiche grâce à l'appel de la foncion ShowPage2
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    echo "
    <form enctype=\"multipart/form-data\" id="form2" name="form2"  method=\"post\" onsubmit=\"ShowPage2('page1.php','form2','div1'); return false;\">";
    //echo le reste du formulaire
    echo "<input type=\"submit\" name=\"menu\" value=\"ouvrir\" ></form>";
    En ayant mis le même code pour l'appel de la fonction ShowPage2(), cela ne marche pas :
    le script me renvoie aucune valeur ou référence du formulaire form2, et la fonction alert() de ShowPage2 ne fonctionne pas non plus, comme si le fait d'afficher des formulaires dans différentes div brouille les références des formulaires.

    Pour complément d'info :
    j'ai essayé en spécifiant parent.ShowPage2(), j'ai essayé document.forms[].submit etc... , j'ai testé les onclick qui ne marchent pas mieux. Bref le problème semble véritablement provenir d'une perte d'adresse ou de référence de la variable form2 dans le javascript car j'applique 2 fois le même code dans 2 configurations quasi identiques et l'un marche et pas l'autre...

    merci d'avance

Discussions similaires

  1. [AJAX] Charger une photo dans un div
    Par chelguera dans le forum Général JavaScript
    Réponses: 13
    Dernier message: 23/10/2007, 19h18
  2. [AJAX] Ajax et un formulaire(dans un div include)
    Par HWICE dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 10/09/2007, 17h49
  3. [AJAX] Charger une page dans un div
    Par pcdj dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 29/07/2007, 21h15
  4. Réponses: 17
    Dernier message: 03/06/2006, 04h29

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo