recuperer input select sans sumbit

Version imprimable

bonjour j'ai un formulaire qui récupère des adresses (rue) d'une ville , je veux lorsque je sélectionne une adresse je récupère l'adresse de la ville sans faire un button de submit.

c'est à dire envoyer au serveur mes adresse sans sumbit pour pouvoir recuperer une autre page php

voici mon code html

Code:

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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
 
<table id="liste_agent">   
           <div>
	       <form action="#" method="POST"  >
		    <select name="address" id="address"  >
			 <option value="-1">selctionner un axe</option>
	<option value="AV.CHARLES DEGAULE">AV.CHARLES DEGAULE</option><option value="AV. MOCTAR OULD DADAH">AV. MOCTAR OULD DADAH</option><option value="AV.GAMAL  ABDEL NASER">AV.GAMAL  ABDEL NASER</option>
		  </select>
		 </form>
 
    </div>		 
		 <tr>
		        <th>Code Agent</th>
				<th>Liste</th>
				<th>GE-MoyE</th>
				<th>PE-MicroE</th>
				<th>PHARMACIE</th>
				<th>DIVERS</th>
 
		</tr>
		    		<tr>
		    <td> 00</td>
			<td><a href="#" class="popup-light" data-popup-class="popup-block" data-popup-width="500px"  id="00">les societes des agents </a> </td>
			<td><a href="cartographie_ge_me.php?id=00"   id="00"  target="_blank">Carte </a> </td>
			<td><a href="cartographie_pe_micro.php?id=00 "    id="00"  target="_blank">Carte </a> </td>
			<td><a href="cartographie_pharm.php?id=00"    id="00"  target="_blank">Carte </a> </td>
			<td><a href="cartographie_divers.php?id=00"    id="00"  target="_blank">Carte </a> </td>
		</tr>
		    		<tr>
		    <td> 01</td>
			<td><a href="#" class="popup-light" data-popup-class="popup-block" data-popup-width="500px"  id="01">les societes des agents </a> </td>
			<td><a href="cartographie_ge_me.php?id=01"   id="01"  target="_blank">Carte </a> </td>
			<td><a href="cartographie_pe_micro.php?id=01 "    id="01"  target="_blank">Carte </a> </td>
			<td><a href="cartographie_pharm.php?id=01"    id="01"  target="_blank">Carte </a> </td>
			<td><a href="cartographie_divers.php?id=01"    id="01"  target="_blank">Carte </a> </td>
		</tr>
		    		<tr>
		    <td> 02</td>
			<td><a href="#" class="popup-light" data-popup-class="popup-block" data-popup-width="500px"  id="02">les societes des agents </a> </td>
			<td><a href="cartographie_ge_me.php?id=02"   id="02"  target="_blank">Carte </a> </td>
			<td><a href="cartographie_pe_micro.php?id=02 "    id="02"  target="_blank">Carte </a> </td>
			<td><a href="cartographie_pharm.php?id=02"    id="02"  target="_blank">Carte </a> </td>
			<td><a href="cartographie_divers.php?id=02"    id="02"  target="_blank">Carte </a> </td>
		</tr>
		    		<tr>
		    <td> 03</td>
			<td><a href="#" class="popup-light" data-popup-class="popup-block" data-popup-width="500px"  id="03">les societes des agents </a> </td>
			<td><a href="cartographie_ge_me.php?id=03"   id="03"  target="_blank">Carte </a> </td>
			<td><a href="cartographie_pe_micro.php?id=03 "    id="03"  target="_blank">Carte </a> </td>
			<td><a href="cartographie_pharm.php?id=03"    id="03"  target="_blank">Carte </a> </td>
			<td><a href="cartographie_divers.php?id=03"    id="03"  target="_blank">Carte </a> </td>
		</tr>
		    		<tr>
		    <td> 04</td>
			<td><a href="#" class="popup-light" data-popup-class="popup-block" data-popup-width="500px"  id="04">les societes des agents </a> </td>
			<td><a href="cartographie_ge_me.php?id=04"   id="04"  target="_blank">Carte </a> </td>
			<td><a href="cartographie_pe_micro.php?id=04 "    id="04"  target="_blank">Carte </a> </td>
			<td><a href="cartographie_pharm.php?id=04"    id="04"  target="_blank">Carte </a> </td>
			<td><a href="cartographie_divers.php?id=04"    id="04"  target="_blank">Carte </a> </td>
		</tr>
		    		<tr>
		    <td> 05</td>
			<td><a href="#" class="popup-light" data-popup-class="popup-block" data-popup-width="500px"  id="05">les societes des agents </a> </td>
			<td><a href="cartographie_ge_me.php?id=05"   id="05"  target="_blank">Carte </a> </td>
			<td><a href="cartographie_pe_micro.php?id=05 "    id="05"  target="_blank">Carte </a> </td>
			<td><a href="cartographie_pharm.php?id=05"    id="05"  target="_blank">Carte </a> </td>
			<td><a href="cartographie_divers.php?id=05"    id="05"  target="_blank">Carte </a> </td>
		</tr>
		    		<tr>
		    <td> 06</td>
			<td><a href="#" class="popup-light" data-popup-class="popup-block" data-popup-width="500px"  id="06">les societes des agents </a> </td>
			<td><a href="cartographie_ge_me.php?id=06"   id="06"  target="_blank">Carte </a> </td>
			<td><a href="cartographie_pe_micro.php?id=06 "    id="06"  target="_blank">Carte </a> </td>
			<td><a href="cartographie_pharm.php?id=06"    id="06"  target="_blank">Carte </a> </td>
			<td><a href="cartographie_divers.php?id=06"    id="06"  target="_blank">Carte </a> </td>
		</tr>
		    		<tr>
		    <td> 07</td>
			<td><a href="#" class="popup-light" data-popup-class="popup-block" data-popup-width="500px"  id="07">les societes des agents </a> </td>
			<td><a href="cartographie_ge_me.php?id=07"   id="07"  target="_blank">Carte </a> </td>
			<td><a href="cartographie_pe_micro.php?id=07 "    id="07"  target="_blank">Carte </a> </td>
			<td><a href="cartographie_pharm.php?id=07"    id="07"  target="_blank">Carte </a> </td>
			<td><a href="cartographie_divers.php?id=07"    id="07"  target="_blank">Carte </a> </td>
		</tr>
		    		<tr>
		    <td> 08</td>
			<td><a href="#" class="popup-light" data-popup-class="popup-block" data-popup-width="500px"  id="08">les societes des agents </a> </td>
			<td><a href="cartographie_ge_me.php?id=08"   id="08"  target="_blank">Carte </a> </td>
			<td><a href="cartographie_pe_micro.php?id=08 "    id="08"  target="_blank">Carte </a> </td>
			<td><a href="cartographie_pharm.php?id=08"    id="08"  target="_blank">Carte </a> </td>
			<td><a href="cartographie_divers.php?id=08"    id="08"  target="_blank">Carte </a> </td>
		</tr>
 
		 </table>

merci d'avance pour votre aide

29/08/2013, 14h48
fayred

Bonjour,

tu peux pour celà utiliser la partie ajax de jquery : http://api.jquery.com/jQuery.get/

Il faut tout d'abord que tu recuperes la valeur de ton input pour l'envoyer dans requete au serveur. Ensuite ton script php doit renvoyer la ville qui correspond. Tu récupères après, coté javascript, la ville et tu l'insères là où tu veux.

N'hésite pas à poster les différentes parties du code (js et php) pour que l'on puisse t'aider.

Bon courage

merci de votre aide j'ai essayer de realiser ce bout code code mais rien ne se passe et moi je ne veux envoyer le formulaire a partir d'un bouton voici mon bout de code
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 $(document).ready(function(){ var addresse= $("select[name='address'] option:selected").val(); if(addresse=="address") { $.ajax({ type: "POST", url: "cartographie_ge_me.php, success:function(data){ data: { 'address': addresse } } }); } });
merci d'avance

29/08/2013, 17h17
fayred

Il manque un guillemet " ici :

Code:

url: "cartographie_ge_me.php",

Je pense que l'url est plutot du type "http://localhost/cartographie_ge_me.php"
Concernant ta requete et ses paramètres, il faudrait plutôt passer par du get et lui fournir la valeur que tu as récupéré.

Quelques tests avant d'aller plus loin :
Quelles sont les erreurs dans la console d'erreur de ton navigateur?
Si tu utilises "console.log" ou "alert" pour afficher la valeur récupéré de ton select, est-ce que tu récupère la bonne valeur?
Si tu vas directement sur l'url http://localhost/cartographie_ge_me.php est-ce que tu récupères bien quelque chose?

Si tu n'a jamais utilisé jquery ajax je te conseille d'aller faire un petit tour du coté de la doc et des tutos et de refaire un petit exemple simple.
29/08/2013, 17h20
Bovino

Code:

if(addresse=="address")

:roll:

Tu t'es demandé dans quels cas cette condition est remplie ? :aie:

merci de votre aide c'est pas la première fois que je travaille avec jquery mais la je rencontre un niveau probleme , j'ai l habitude de faire des insert dans BD avec jquery mais c'est pas la meme chose car labas j utiliser le submit d'un button mais la je doit réagir en fonction de l'option selectionner.

Citation:

Il manque un guillemet " ici :

bon j ai corrigé les guillemets mais rien ne se passe

Citation:

if(addresse=="address")

cela teste si ya option est bien selectionner merci de votre voici mon nouveau code
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 $(document).ready(function(){ { var addresse= $("select[name='address'] option:selected").val(); if(addresse=="address") { $.ajax({ type: "POST", url: "cartographie_ge_me.php", success:function(data){ data: { 'address': addresse } } }); } });

Il faudrait également que tu écoutes l'evenement sur le select pour savoir quand il a été rempli.

A priori ce qui se passe actuellement (ce ne sont que des suppositions, il faudrait que tu fasses des console.log ou des alert pour vérifier) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
$(document).ready(function(){ 
	{
	  var addresse= $("select[name='address'] option:selected").val(); //cette variable est assignée au chargement de la page.
// or, tu n'a pas encore selectionné d'option dans ton select donc il ya des chances que ta variable soit vide.
   if(addresse=="address")// la variable est vide (à vérifier), on ne passe pas dans le if
   {
   $.ajax({ 
					type: "POST", // passe en get ce sera plus simple, et il faudra que tu mettes ton parametre dans l'url
					url: "cartographie_ge_me.php", // je pense vraiment que ce n'est pas la bonne url, as tu vérifié (voir mon post précédent) ?
					success:function(data){ // ici fais un console.log pour verifier que tu arrives bien dans la fonction (ou pas !)
					data: { 'address': addresse }
        }				  
		  });
   }
 
	});

Et enfin, as-tu vérifié ce que te renvoyais le script php?