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] Ajax formulaire préremplir lors d'une saisie


Sujet :

AJAX

  1. #1
    Membre confirmé
    Homme Profil pro
    Etudiant en alternance
    Inscrit en
    Février 2011
    Messages
    75
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Etudiant en alternance

    Informations forums :
    Inscription : Février 2011
    Messages : 75
    Par défaut [AJAX] Ajax formulaire préremplir lors d'une saisie
    Bonjour à tous,

    J'ai un petit problème

    Je m'explique alors j'ai un petit formulaire ou je dois renseigner un identifiant

    Code html : 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
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    		<script type="text/javascript" src="ajax.js"></script>
    			<title>Mon site </title>
    	</head>
    		<body>
    			<table border="1">
    				<tr>
    					<td>identification</td><td><input type="text" id="id" onblur="remplir();"></td>
    				</tr>
    				<tr>
    					<td>libelle</td><td><input type="text" id="id"><div id="libelle"></div></td>
    				</tr>
    				<tr>
    					<td>classe</td><td><input type="text" id="id"><div id="libelle"></div></td>
    				</tr>
    				<tr>
    					<td>description</td><td><input type="text" id="id"><div id="libelle"></div></td>
    				</tr>
    			</table>
    			<div id='log'></div>
    </body>
    </html>
    dès que cette manipe et passée je dois avoir les autres champs rempli par rapport à l'identifiant

    voici mon code ajax

    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 remplir()
    {
    var xhr = new XMLHttpRequest();
    var id = document.getElementById('id').value;
     
    	xhr.onreadystatechange = function() 
    	{
     
    		if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) 
    		{
     
    			leselect = xhr.responseText;
    			document.getElementById('log').innerHTML = leselect;
    		}
     
    	};
     
    	xhr.open("POST","remplir.php",true);
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        xhr.send("id="+id);	
     
    }
    je voudrais afficher chaque resultat dans les différents div de mon formulaire
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <?php
    include('inc_connexion.php');
    connexion();
     
    $id = $_POST['id'];
     
    $requete= "select *  from essaie where id='$id'";
    $resultat=mysql_query($requete);
    $ligne=mysql_fetch_array($resultat);
     
    echo $ligne['libelle'];
    echo  $ligne['note'];
    echo  $ligne['description'];
    ?>
    si quelqu'un a une solus je suis preneur.

  2. #2
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Il ne faut pas faire des echo comme ça.
    Il faut que tu structures la réponse de façon à pouvoir l'exploiter dans ta fonction de rappel JavaScript (par exemple avec le format JSON) afin de pouvoir identifier facilement chaque élément à insérer et l'intégrer dans les champs correspondants de ton formulaire.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  3. #3
    Membre confirmé
    Homme Profil pro
    Etudiant en alternance
    Inscrit en
    Février 2011
    Messages
    75
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Etudiant en alternance

    Informations forums :
    Inscription : Février 2011
    Messages : 75
    Par défaut
    Merci Bovino pour ta réponse en effet je viens de modifier un peu mon fichier et j'arrive à afficher mes réponses de façon séparer voici mon code

    Ajax
    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
    function remplir()
    {
    var xhr = new XMLHttpRequest();
    var id = document.getElementById('id').value;
     
    	xhr.onreadystatechange = function() 
    	{
     
    		if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) 
    		{
     
    			reponse = xhr.responseText;
    			var longueur = reponse.length;
    			var tab = reponse.split("|");
    			var span = document.getElementsByTagName('span');
     
    			for (i=0;i<longueur;i++)
    			{
    				span[i].innerHTML+= tab[i];
    			}
    		}
     
    	};
     
    	xhr.open("POST","remplir.php",true);
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        xhr.send("id="+id);	
     
    }
    PHP
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <?php
    include('inc_connexion.php');
    connexion();
     
    $id = $_POST['id'];
     
    $requete= "select *  from essaie where id='$id'";
    $resultat=mysql_query($requete);
    $ligne=mysql_fetch_array($resultat);
     
    echo $ligne['libelle']."|".$ligne['note']."|".$ligne['description'];
    ?>

  4. #4
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Utiliser un séparateur personnalisé est effectivement une méthode efficace, mais attention
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    var span = document.getElementsByTagName('span');
    cela signifie que tu n'as que trois balises <span> dans la page... ce qui n'est pas forcément le cas.
    Essaye peut-être d'utiliser des identifiants à la place.
    Par exemple, chaque span devant être mis à jour à un identifiant spécifique et dans ta réponse, tu ajoutes le champ auquel la valeur correspond.
    Cela nécessite un nouveau séparateur
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    echo "libelle<>".$ligne['libelle']."|note<>".$ligne['note']."|description<>".$ligne['description'];
    et dans le JavaScript
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    var tab = reponse.split("|");
    tab.forEach(function(elem){
        var valeurs = elem.split('<>');
        document.getElementById(valeurs[0]).innerHTML = valeurs[1];
    });
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  5. #5
    Membre confirmé
    Homme Profil pro
    Etudiant en alternance
    Inscrit en
    Février 2011
    Messages
    75
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Etudiant en alternance

    Informations forums :
    Inscription : Février 2011
    Messages : 75
    Par défaut
    Ah oui en effet ça me semble plus propre comme code
    Je te remercie beaucoup pour ton aide

  6. #6
    Membre confirmé
    Homme Profil pro
    Etudiant en alternance
    Inscrit en
    Février 2011
    Messages
    75
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Etudiant en alternance

    Informations forums :
    Inscription : Février 2011
    Messages : 75
    Par défaut
    J'aurai une autre question comment pourrai-je placer mes réponses directement dans mes input de mon formulaire et non dans un span ou div


    Fichier HTML
    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
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    		<script type="text/javascript" src="ajax.js"></script>
    		<title>Mon site </title>
    	</head>
    		<body>
    			<table border="1">
    				<tr>
    					<td>identification</td><td><input type="text" id="id" onblur="remplir();"></td>
    				</tr>
    				<tr>
    					<td>libelle</td><td><input type="text" id"="log"></td>
    				</tr>
    				<tr>
    					<td>classe</td><td><input type="text" id"="log"></td>
    				</tr>
    				<tr>
    					<td>description</td><td><input type="text" id"="log"></td>
    				</tr>
    			</table>
    </body>
    </html>

  7. #7
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    En utilisant la propriété value des champs de formulaires au lieu de innerHTML.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  8. #8
    Membre confirmé
    Homme Profil pro
    Etudiant en alternance
    Inscrit en
    Février 2011
    Messages
    75
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Etudiant en alternance

    Informations forums :
    Inscription : Février 2011
    Messages : 75
    Par défaut
    Ok merci pour toutes tes réponses

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

Discussions similaires

  1. Réponses: 4
    Dernier message: 06/05/2009, 16h55
  2. Formulaire bloqué lors d'une ouverture par macro.
    Par Monsieur Peck dans le forum IHM
    Réponses: 6
    Dernier message: 16/06/2006, 17h41
  3. [AJAX] Ajax et formulaire
    Par Mimi Bulles dans le forum Général JavaScript
    Réponses: 7
    Dernier message: 13/05/2006, 15h17
  4. [AJAX] Ajax et formulaire
    Par Mimi Bulles dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 13/05/2006, 12h44
  5. [VBA-E]Tests lors d'une saisie
    Par aokiseiichiro dans le forum Macros et VBA Excel
    Réponses: 5
    Dernier message: 23/03/2006, 17h11

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