Les Allergies
Alimentaires
Posez votre question Signaler

AJAX case à cocher + select

traz0m - Dernière réponse le 17 août 2010 à 20:45
Bonjour,
ma question est assez complexe, je souhaite avoir mes cases à cocher : 
<input type="checkbox" name="A" />A 
<input type="checkbox" name="B"/>B
<input type="checkbox" name="C"/>C

et ensuite mon select 
<select name="lol">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

Je souhaiterais récupérer par exemple A et 2 en AJAX pour que ça remplisse comme ça mon input sans rechargement : 
<input> A 2 </input>

je sais le faire avec un select qui rempli mon input par exemple avec le code AJAX ci-dessous mais je souhaiterais qu'il remplisse mon input avec les deux formulaires comme montrer ci-dessus. 

			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('moninput').value = leselect;
					}
				}

				// Ici on va voir comment faire du post
				xhr.open("POST","NumdossierPCMI.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('monselect');
				idauteur = sel.options[sel.selectedIndex].value;
				xhr.send("monselect="+idauteur);
				
				
			}

Merci d'avance de votre aide
Lire la suite 

AJAX case à cocher + select »

3 réponses
Réponse
+2
moins plus
avion-f16 16620Messages postés 17 février 2008Date d'inscription 8 mai 2012Dernière intervention 17 août 2010 à 19:06
Salut.

Et t'a besoin d'AJAX pour faire ça ?!
Il suffit d'assembler les deux valeurs et de les écrire dans l'élément, tout ça en Javascript, inutile d'utiliser le serveur pour ça. 

<input type="text" name="final" />

<select name="liste" onchange="update();">
    ...
</select>

<input type="checkbox" name="A" onchange="update();" />
<input type="checkbox" name="B" onchange="update();" />
<input type="checkbox" name="C" onchange="update();" />
La fonction :
function update() {
    var liste = document.forms[0].elements['liste'];
    var caseA = document.forms[0].elements['A'];
    var caseB = document.forms[0].elements['V'];
    var caseC = document.forms[0].elements['C'];

    var finale = document.forms[0].elements['final'];
    var chaine = "";

    chaine += liste.value;
    
    if(caseA.checked) {
        chaine += " A";
    }

    if(caseB.checked) {
        chaine += " B";
    }
    if(caseC.checked) {
        chaine += " C";
    }

    final.value = chaine;
}

 Ajouter un commentaire - Site web
traz0m - 17 août 2010 à 19:30
merci de la réponse premièrement mais oui j'ai besoin d'AJAX car là ok j'aurais le resultat des deux variables mais en faite j'ai besoin de mes deux variables pour effectuer une requete sql.

c'est pour cela que je souhaite les récupérer en POST ou GET ou autre dans mon fichier intermédiaire AJAX et ainsi pouvoir faire une requête avec ces 2 variables qui me donnera ma valeur toto à injecter dans le input.

cela marche avec une variable ( celle du select ) mais pas avec deux.
avion-f16- 17 août 2010 à 20:45
Dans ce cas, ça devrait ressembler à ça : https://gist.github.com/23d0c4e877bfc1c84be2
Je n'ai pas testé, il y a sans doute des erreurs.
Ajouter un commentaire
Posez votre question
Ce document intitulé « AJAX case à cocher + select » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
Passage au tout numérique : quel coût pour les particuliers ?