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] Post dans un formulaire


Sujet :

AJAX

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé
    Homme Profil pro
    Inscrit en
    Janvier 2008
    Messages
    261
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Indre et Loire (Centre)

    Informations forums :
    Inscription : Janvier 2008
    Messages : 261
    Par défaut [AJAX] Post dans un formulaire
    Bonjour à tous,

    J'ai un script qui me permet de sélectionner un élément d'une liste déroulante, et en fonction du choix de remplir des input de texte.
    Cette partie fonctionne, hors lorsque je souhaite valider le formulaire et enregistrer les données des input text ils ne sont pas reconnus...

    Voilà mon code :

    Le script javascript :

    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
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    	<script type='text/javascript'>
     
    			function getXhr(){
                                    var xhr = null; 
    				if(window.XMLHttpRequest) // Firefox et autres
    				   xhr = new XMLHttpRequest(); 
    				else if(window.ActiveXObject){ // Internet Explorer 
    				   try {
    			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
    			            } catch (e) {
    			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
    			            }
    				}
    				else { // XMLHttpRequest non supporté par le navigateur 
    				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
    				   xhr = false; 
    				} 
                                    return xhr;
    			}
     
     
    			/**
    			* Méthode qui sera appelée sur le click du bouton
    			*/
    			function go1(){
    				var xhr = getXhr();
    				// On défini ce qu'on va faire quand on aura la réponse
    				xhr.onreadystatechange = function(){
    					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
    					if(xhr.readyState == 4 && xhr.status == 200){
    						leselect = xhr.responseText;
    						// On se sert de innerHTML pour rajouter les options a la liste
    						document.getElementById('heure').innerHTML = leselect;
    					}
    				}
     
    				// Ici on va voir comment faire du post
    				xhr.open("POST","ajax_journee.php",true);
    				// ne pas oublier ça pour le post
    				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    				// ne pas oublier de poster les arguments
    				// ici, l'id de l'auteur
    				sel = document.getElementById('journee');
    				id_journee = sel.options[sel.selectedIndex].value;
    				xhr.send("id_journee="+id_journee);
    			}
     
    </script>
    Je l'ai pris sur l'exemple des listes liées, le problème vient peut être de là...

    Ma page ajax_journee.php

    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
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    if(isset($_POST["id_journee"]))
    	{
     
    		$res = mysql_query("	SELECT debut_journee, fin_journee, heure_travaille
    						   		FROM journee 
    								WHERE id_journee=".$_POST["id_journee"]);
    		$row = mysql_fetch_assoc($res);
    		if ($row['debut_journee'] != "00:00:00") { $deb_read = 'readonly="readonly"'; } else { $deb_read = ""; }
    		if ($row['fin_journee'] != "00:00:00") { $fin_read = 'readonly="readonly"'; } else { $fin_read = ""; }
    		if ($row['heure_travaille'] != "00:00:00") { $trav_read = 'readonly="readonly"'; } else { $trav_read = ""; }
     
     
     
    		echo '<table width="100%" cellpadding="0" cellspacing="0">
            <tr>
            <td  width="160px">Heure de début :</td>
          <td><input type="text" name="heure_debut"   value='.substr($row['debut_journee'],0, 5).' size="4" class="formulaire" style="text-align: center;" /></td>
          </tr>
             			<tr style="height: 5px;"></tr>
                        <tr>
                            <td align="left">Heure de fin :</td>
                            <td><input type="text" name="heure_fin"   value='.substr($row['fin_journee'],0, 5).' size="4" class="formulaire" style="text-align: center;" /></td>
                 		</tr>
    					<tr style="height: 5px;"></tr>
                        <tr>
                            <td align="left">Heure travaillé :</td>
                            <td><input type="text" name="heure_trav"   value='.substr($row['heure_travaille'],0, 5).' size="4" class="formulaire" style="text-align: center;" /></td>
                 		</tr>
     
                     </table>';
     
    	}
    Merci d'avance de votre aide

  2. #2
    Expert éminent

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Par défaut
    Bonjour,
    il serait plus simple de créer ta table (on utilise plutôt des DIV + CSS maintenant pour la mise en page ) ainsi que les input dès la création de la page, mais en la masquant (style.display="none").
    Ensuite, via Ajax, tu n'aurais plus qu'à récupérer les valeurs (les différentes heures).
    Il suffit alors de mettre à jour les input concernés puis d'afficher la table (style.display="block").

    Cela devrait poser moins de problème à ton form ...

    A+

  3. #3
    Membre éclairé
    Homme Profil pro
    Inscrit en
    Janvier 2008
    Messages
    261
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Indre et Loire (Centre)

    Informations forums :
    Inscription : Janvier 2008
    Messages : 261
    Par défaut
    Merci de ton aide.
    Par contre je ne vois pas trop comment appliquer ta solution.
    Car en fait dans ma page ou mon menu déroulant j'affiche le tableau dans cette partie de code :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
     <div id='heure' style='display:inline'>
     
                 </div>
    Je ne vois pas trop comment adapter le code ajax pour remplir les input caché.
    D'ailleurs ils doivent ressembler à ça :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
     <input type="text" style="display:none;" name="heure_debut" />
    Et l'ajax doit être modifié ici non ?

    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
    22
    function go1(){
    				var xhr = getXhr();
    				// On défini ce qu'on va faire quand on aura la réponse
    				xhr.onreadystatechange = function(){
    					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
    					if(xhr.readyState == 4 && xhr.status == 200){
    						leselect = xhr.responseText;
    						// On se sert de innerHTML pour rajouter les options a la liste
    						document.getElementById('heure').innerHTML = leselect;
    					}
    				}
     
    				// Ici on va voir comment faire du post
    				xhr.open("POST","ajax_journee.php",true);
    				// ne pas oublier ça pour le post
    				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    				// ne pas oublier de poster les arguments
    				// ici, l'id de l'auteur
    				sel = document.getElementById('journee');
    				id_journee = sel.options[sel.selectedIndex].value;
    				xhr.send("id_journee="+id_journee);
    			}
    Merci d'avance de ton aide.

  4. #4
    Expert éminent

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Par défaut
    Citation Envoyé par dam28800 Voir le message
    Merci de ton aide.
    Par contre je ne vois pas trop comment appliquer ta solution.
    Car en fait dans ma page ou mon menu déroulant j'affiche le tableau dans cette partie de code :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
     <div id='heure' style='display:inline'>
     
                 </div>
    Ben pour l'instant il n'y est pas =>
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    <div id='heure' style='display:inline'>
    <table id="table_heures" width="100%" cellpadding="0" cellspacing="0" style="display:none;">
            <tr>
            <td  width="160px">Heure de début :</td>
    ...
    </tr></table>
    </div>
    (pas la peine de masquer les input : ils seront masqués et affichés en même temps que le tableau)

    Citation Envoyé par dam28800 Voir le message
    Je ne vois pas trop comment adapter le code ajax pour remplir les input caché.
    Simplement avec
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById('id_input').value=la_valeur;
    (il faudrait donc ajouter un id à chacun, celui-ci pouvant être égal au name, sous réserve que chaque id reste unique).

    Ta page appelée par Ajax n'a qu'à renvoyer les couples identifiant/valeur correspondant au différentes heures.
    Pour ce faire, tu peux utiliser JSon, par exemple, ou encore définir toi-même un format ...

    Une fois que tu auras récupéré les valeurs et les aura affectées chacune à l'input correspondant, tu n'auras plus qu'à afficher la table
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById("table_heures").style.display = "block";
    A+

  5. #5
    Rédacteur/Modérateur
    Avatar de andry.aime
    Homme Profil pro
    Inscrit en
    Septembre 2007
    Messages
    8 391
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Ile Maurice

    Informations forums :
    Inscription : Septembre 2007
    Messages : 8 391
    Par défaut
    Bonjour,
    une discussion qui peux t'aider avec le conseil de E.Bzz : http://www.developpez.net/forums/d78...te-deroulante/

  6. #6
    Membre éclairé
    Homme Profil pro
    Inscrit en
    Janvier 2008
    Messages
    261
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Indre et Loire (Centre)

    Informations forums :
    Inscription : Janvier 2008
    Messages : 261
    Par défaut
    Bon j'ai pas trop réussi a mettre en place ta solution...
    Mais en fait le problème vient de Mozilla.
    Sous IE je n'ai pas le problème...
    Je devrais passer par un fichier xml non ?

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 7
    Dernier message: 31/05/2016, 17h28
  2. [AJAX] upload dans un formulaire
    Par newto0 dans le forum AJAX
    Réponses: 5
    Dernier message: 27/03/2009, 16h45
  3. Php et Ajax sont dans un formulaire..
    Par aronnax dans le forum Langage
    Réponses: 1
    Dernier message: 26/05/2008, 12h16
  4. [AJAX] Pb inputs dans un formulaire + fichiers docs/tutos sur Ajax!
    Par cassy dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 21/09/2006, 11h19
  5. [AJAX] Récupérer paramètre sur POST dans une servlet
    Par _beber85 dans le forum Servlets/JSP
    Réponses: 1
    Dernier message: 05/04/2006, 11h52

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