11485 sujets

JavaScript, DOM et API Web HTML5

Utiliser plusieurs select

Bonjour,
J'ai créer une page où l'utilisateur choisi une zone et une ville dans 2 select différent. Ensuite lorsqu'il a fait son choix il peut "valider" en appuyant sur le bouton qui doit remplir la balise <div> du résultat voulu. Cependant j'ai quelques difficultés en javascript Smiley ohwell .
Problème : Je na sais pas comment récupérer les valeurs de plusieurs select.
Voici le code de ma page

	<div id='menu'>
		<fieldset id="proposition1">
			<legend>Ville</legend>
			<select name='ville' id='ville'>
				<option value='-1'>Vous devez sélectionner une Ville</option>
				<option value="ville1"> Ville 1 </option>
				<option value="ville2"> Ville 2 </option>
			</select>
		</fieldset>
		
		<fieldset id="proposition2">
			<legend>Zone</legend>
			<select name='zone' id='zone'>
				<option value='-1'>Vous devez sélectionner une Zone</option>
				<option value="zone1"> Zone 1 </option>
				<option value="zone2"> Zone 2 </option>
			</select>
		</fieldset>
	</div>
	
	<input 	type='button' value='Afficher ou actualiser' id='bouton' onclick='affiche();'>
	
	<div id='contenu'></div>


Le javascript :

function getXhr2(){
	if(window.XMLHttpRequest) xhr = new XMLHttpRequest(); // Firefox et autres
	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, veuillez le mettre à jour"); 
		xhr = false; 
	   } 
	 }

function affiche(){ 
		
	getXhr2();
	 
	xhr.onreadystatechange = function(){
		if(xhr.readyState == 4 && xhr.status == 200){
			document.getElementById('contenu').innerHTML = xhr.responseText;  
		}   
	}
	xhr.open("POST",'test2.php',true);
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

// Voila ce que j'ai essayé pour les select mais sans succès
	var url='';
	for (i=0; i<monform.elements.length; i++)  
		{					
		if(url){url+='&';}
		if(monform.elements[i].type){  url+=monform.elements[i].id+'='+monform.elements[i].value;}
	}
	  
	xhr.send(url);
	return false;  
}


La page test2.php contient un tableau et un graphique (en utilisant google chart) qui utilisent les variables $_POST["ville"] et $_POST["zone"]. Ces variables me permettent d'aller chercher dans la base les populations.

Merci.[/i][/i][/i]
Modifié par Nabrub (26 May 2016 - 12:18)
Bonjour,

Dès que l'on travaille avec Ajax, je pense que tu peux te tourner sans trop réfléchir vers jQuery qui te simplifiera la chose, pour ton exemple :
$('#menu').submit(function(e){
  e.preventDefault()
  $.post("test2.php", $(this).serialize(), function( data ) {
    $("#contenu").html( data );
  })
})

Normalement, cela devrait remplacer tout ton code JS en prenant soin de remplacer la div#menu par une form#menu et de transformer ton button en submit et en l'intégrant dans la form
<form id='menu'>
  <fieldset id="proposition1">
    ...
  </fieldset>

  <fieldset id="proposition2">
    ...
  </fieldset>
  <input type='submit' value='Afficher ou actualiser' id='bouton'>
</form>
<div id='contenu'></div>
Ton JS fonctionne très bien, merci ! Smiley biggrin
Cependant je dois avoir un export pdf donc je pensais utilisé le form/submit à ce moment là (à moins que l'on puisse le faire plusieurs fois ?)

Voila la structure de mon php :

	<form id='menu' method= 'post' action='export.php' target=_blank>
			<fieldset id="proposition1">
				<legend>Ville</legend>
				<select name='ville' id='ville'>
					...
				</select>
			</fieldset>
			
			<fieldset id="proposition2">
				<legend>Zone</legend>
				<select name='zone' id='zone'>
					....
				</select>
			</fieldset>
		<input 	type='button' value='Afficher ou actualiser' id='bouton'>
		<input 	type='submit' value='exportpdf' id='exporter'>
	</form>
	
	<div id='contenu'></div>


J'ai aussi besoin des valeur $_POST["ville"] et $_POST["zone"] dans l'export pdf.
Je voulais donc essayer avec 'click' en javascript mais je n'arrive pas à le faire (notamment pour récupérer les valeurs 'ville' et 'zone'.

Voila ce que j'ai essayé

$(function(){
	$('bouton').click(function(){
		$.post("test2.php", $('#menu').serialize(), function( data ) {
		$("#contenu").html( data );
	  })
	})
});

Mais il ne fonctionne pas Smiley ohwell .

Le problème : alimenter le div en appuyant sur un bouton, qui doit permettre d'utiliser les valeur $_POST["ville"] et $_POST["zone"]
Modifié par Nabrub (27 May 2016 - 10:59)
Bon finalement j'avais oublié un # Smiley ravi
Il fallait juste que je réutilise le js du submit

Code js pour le bouton:

$(function(){
	$('#bouton').click(function(){
		$.post("test2.php", $('#menu').serialize(),
		function (data){
			$('#contenu').html(data)
		})
	})
});


Merci SolidSnake ! Smiley biggrin
Modifié par Nabrub (27 May 2016 - 11:40)
Sujet clos
Aller à