AJAX case à cocher + select

Fermé
traz0m - 17 août 2010 à 14:03
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 - 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


1 réponse

avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
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;
}
2
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.
0
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
17 août 2010 à 20:45
Dans ce cas, ça devrait ressembler à ça : https://gist.github.com/anonymous/23d0c4e877bfc1c84be2
Je n'ai pas testé, il y a sans doute des erreurs.
0