Liste déroulante qui alimente plusieurs champs texte

**alone06** · 07/07/2014, 00h00

Bonjour, J'ai un soucis avec les listes deroulantes, je sais que c'est un peu bete mais je ne m'y connais pas du tout en ajax, j'ai fais quelques recherches et je suis arrivé à afficher les données sur un seul champs texte alors que je veux le faire sur 5. Voici mon code : Pour la page 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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<html>
	<head>
		<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
       <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
		<script type='text/javascript'>
 
 
			function go(id_page){
    var req = $.ajax({
       url : 'ajax.php',
       data : "id_page="+id_page,
       type : 'post',
       success : function(data){
           // ICI LE CODE POUR REMPLIR TES INPUT
             $('#input_desc').val(req.responseText);
			 $('#input_title').val(req.responseText);
			 $('#input_nom_page').val(req.responseText);
 
       },
 
       error : function(resultat){
              alert(resultat);
       }
 
    });
}
		</script>
	</head>
	<body>
		<form>
			<fieldset style="width: 500px">
				<legend>Liste liées</legend>
				<label>Pages</label>
				<select name='page' id='page' onchange='go()'>
					<option value='-1'>Aucun</option>
					<?
						include "dataconn.php";
$rep2 = mysql_query("SELECT * FROM pages ORDER BY nom_page ASC");
						while($row = mysql_fetch_assoc($rep2)){
							echo "<option value='".$row["id_page"]."'>".$row["nom_page"]."</option>";
						}
					?>
				</select>
				<label>desc</label>
				<div id='div_desc' style='display:inline'>
 <input type="text" name="desc" id="input_desc" value="">
</div>
<label>title</label>
				<div id='div_title' style='display:inline'>
 <input type="text" name="title" id="input_title" value="">
</div>
<label>sujet</label>
				<div id='div_subj' style='display:inline'>
 <input type="text" name="subj" id="input_subj" value="">
</div>
			</fieldset>
		</form>
	</body>
</html>

et ici le code du fichier ajax.php

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
include "dataconn.php";
if(isset($_POST["id_page"])){
    $sql="SELECT * FROM pages WHERE id_page='".$_POST['id_page']."'";
   $res = mysql_query($sql);
   while($row = mysql_fetch_array($res)){
    echo $row["desc"];
	echo $row["title"];
	echo $row["subj"];
 
    }
}
?>

mais quand je fais mon choix sur la liste deroulante je ne reçoit rien sur le champs texte

On m a conseillé d'utiliser json et ajax mais je suis nul dans l'un comme dans l autre

J espere que j etais clair et merci d avance

**andry.aime** · 07/07/2014, 11h55

Bonjour,

Tu n'as pas de variable xhr:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

  $('#input_desc').val(data); // data sera un type String

Pour l'utilisation d'un json, regarde ici: http://api.jquery.com/jQuery.getJSON/.

A+.

**SpaceFrog** · 07/07/2014, 13h11

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 $('#input_desc', '#input_title',#input_nom_page ').val(data);

mais a mon avis tu auras un souci car ils auront tous le même contenu ...
si tu veux récupérer différent éléments regarde du coté de dataType : json,

**alone06** · 07/07/2014, 22h52

merci pour vos reponse
effectivement il y avait une erreur des intitulés mais juste au niveau du copier coller,
voila ce que j'ai fais

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<html>
<head>
	<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
       <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script type='text/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
function go(id_page){
    var req = $.ajax({
       url : 'ajax.php',
       data : "id_page="+id_page,
       type : 'post',
       success : function(data){
           //console.log(data);
           // ICI LE CODE POUR REMPLIR TES INPUT
             $('#input_desc').val(data.desc);
      $('#input_title').val(data.title);
      $('#input_subj').val(data.subj);
 
       },
 
       error : function(data){
              alert('error'+data);
       }
 
    });
}

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
26
27
28
29
30
31
32
33
	</script>
</head>
<body>
	<form>
		<fieldset style="width: 500px">
			<legend>Liste liées</legend>
			<label>Pages</label>
			<select name='page' id='page' onchange='go(this.value)'>
				<option value='-1'>Aucun</option>
				<?
                                        include "dataconn.php";
$rep2 = mysql_query("SELECT * FROM pages ORDER BY nom_page ASC");
                                        while($row = mysql_fetch_assoc($rep2)){
                                                echo "<option value='".$row["id_page"]."'>".$row["nom_page"]."</option>";
                                        }
                                ?>
			</select>
			<label>desc</label>
			<div id='div_desc' style='display:inline'>
 <input type="text" name="desc" id="input_desc" value="">
</div>
<label>title</label>
			<div id='div_title' style='display:inline'>
 <input type="text" name="title" id="input_title" value="">
</div>
<label>sujet</label>
			<div id='div_subj' style='display:inline'>
 <input type="text" name="subj" id="input_subj" value="">
</div>
		</fieldset>
	</form>
</body>
</html>

ajax.php

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
15
16
<?php
include "dataconn.php";
if(isset($_POST["id_page"])){
    $sql="SELECT * FROM pages WHERE id_page='".$_POST['id_page']."'";
   $res = mysql_query($sql);
$arrResult = array();
   while($row = mysql_fetch_array($res)){
        $arrResult['desc'] =$row["desc"];
 $arrResult['title'] = $row["title"];
 $arrResult['subj'] =$row["subj"];
 
    }
}
 
echo json_encode($arrResult);
?>

au niveau de la console j'ai le bon resultat mais les inputs restent vides

**alone06** · 07/07/2014, 23h00

merci pour vos reponses je viens de régler le soucis
pour ceux qui ont le meme soucis il faut changer l'ancienne fonction js

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
function go(id_page){
    $.ajax({
       url : 'ajax.php',
       data : "id_page="+id_page,
       type : 'post',
       dataType : 'json',
       success : function(data){ 
           // ICI LE CODE POUR REMPLIR TES INPUT
             $('#input_desc').val(data.desc);
             $('#input_title').val(data.title);
             $('#input_subj').val(data.subj);
       },
 
       error : function(resultat){
              alert(resultat);
       }
 
    });
}

Liste déroulante qui alimente plusieurs champs texte [AJAX]

jQuery

Discussions similaires

Partager

Partager