AJAX case à cocher + select

Question

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

Afficher la suite

avion-f16 · Accepted Answer

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;
}

AJAX case à cocher + select

1 réponse

Votre réponse

Discussions similaires

Newsletters