[AJAX] Faire une requete avec Ajax suite Onchange input text

**skins** · 15/09/2010, 18h04

Bonjour
Sur mon site j'utilise un formulaire ou j'ai deux champs, date et heure (l'utilisateur choisi la date et l'heure d'un rendez-vous) je souhaite que quant l'utilisateur sélectionne une date, exécuté une requête qui va vérifié les disponibilités de cette journée.

Un coup de main svp ?

**andry.aime** · 15/09/2010, 20h49

Bonsoir,

Le tutoriel

Web 2.0, allez plus loin avec AJAX et XMLHttpRequest

A+.

**skins** · 15/09/2010, 20h56

Envoyé par andry.aime

Bonsoir,

Le tutoriel

Web 2.0, allez plus loin avec AJAX et XMLHttpRequest

A+.

Bonsoir andry.aime , merci pour ta réponse
en faite j'ai apprit ce tuto par-cœur et je n'arrive toujours pas a trouver une solution, j'ai réalisé tous les exemples mais pour le mien ça bloc

**andry.aime** · 15/09/2010, 20h59

Envoyé par skins

mais pour le mien ça bloc

Montres ce que tu as fait pour que l'on puisse corrigé

**skins** · 16/09/2010, 11h23

Je vous remercie pour votre aide
voilà
j'ai 2 partie comme indiqué dans le tuto :

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
60
61
62
63
64
65
66
67
 
<html>
	<head>
		<title>Mon fichier Ajax</title>
		<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 go(){
				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('livre').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","semaine.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('auteur');
				idauteur = sel.options[sel.selectedIndex].value;
				xhr.send("idAuteur="+idauteur);
			}
		</script>
	</head>
	<body>
		<form>
			<fieldset style="width: 500px">
				<legend>Liste liées</legend>
				<label>Auteurs</label>
				<input type='text' id='auteur' onchange='go()'>
 
 
				<label>Livres</label>
				<div id='livre'>
 
				</div>
			</fieldset>
		</form>
	</body>
</html>

La 2eme partie semaine.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
 
<?php
        
        if(isset($_POST["idAuteur"])){
                mysql_connect("localhost","root","pass");
                mysql_select_db("my_bd");
 
$semaine = $_POST["idAuteur"] ;
$result2=mysql_query ("SELECT COUNT(*) AS nbr FROM jos_weeks WHERE semaine='$semaine' " );
$donnees = mysql_fetch_array($result2) ;
$nbr = $donnees['nbr'] ;
 
if ($nbr != 0)
{ 
 
$res = mysql_query("SELECT * FROM jos_weeks WHERE semaine=".$_POST["idAuteur"]." ");
 
//traitement de la requête 
<table>
 
.
.
.
</table> 
 
<?php
}
}
?>

un petit coup de main svp

**gwyohm** · 16/09/2010, 11h38

Attention dans les copier/coller dans les tutos ! tu nous parles de date et heure et on se retrouve avec des livres et des auteurs !

Envoyé par skins

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
                        // GWYOHM: mettre des commentaires exacts ou pas de
                        // commentaires du tout ! Y'a pas de bouton
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go(){
				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){
						// GWYOHM: mauvais choix de nom de variable  + même remarque que plus haut 
                                                leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('livre').innerHTML = leselect;
					}
				}

				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxLivre.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('auteur');
              			// GWYOHM:  Cette syntaxe permet de récupérer la valeur d'un select ! tu es sur un input text
				idauteur = sel.options[sel.selectedIndex].value;

                                        // A remplacer par

                                        idAuteur = sel.value;
				xhr.send("idAuteur="+idauteur);
			}
		</script>
...
				<legend>Liste liées</legend>
				<label>Auteurs</label>
				<input type='text' id='auteur' onchange='go()'>
					

				<label>Livres</label>
				<div id='livre'>

				</div>
...

[AJAX] Faire une requete avec Ajax suite Onchange input text

AJAX

Vue hybride

Discussions similaires

Partager

Partager