Comment puis-je transmettre la valeur de l'élément de formulaire précédent dans une fonction javascript "onchange"?

Question

Je souhaite apporter des améliorations à l'interface utilisateur d'une page que je développe. Plus précisément, je dois ajouter un autre menu déroulant pour permettre à l'utilisateur de filtrer les résultats.

Ceci est mon code actuel: fichier HTML:

<select name="test_id" onchange="showGrid(this.name, this.value, 'gettestgrid')"> 
<option selected>Select a test--></option> 
<option value=1>Test 1</option> 
<option value=2>Test 2</option> 
<option value=3>Test 3</option> 
</select> 

C'est un code pseudo pour ce que je veux arriver:

<select name="test_id"> 
<option selected>Select a test--></option> 
<option value=1>Test 1</option> 
<option value=2>Test 2</option> 
<option value=3>Test 3</option> 
</select> 
<select name="statistics" onchange="showGrid(PREVIOUS.name, PREVIOUS.VALUE, THIS.value)"> 
<option selected>Select a data display --></option> 
<option value='gettestgrid'>Show averages by student</option> 
<option value='gethomeroomgrid'>Show averages by homeroom</option> 
<option value='getschoolgrid'>Show averages by school</option> 
</select> 

Comment puis-je accéder au nom et la valeur de champ précédent? Toute aide très appréciée, merci!

En outre, fonction JS pour référence:

function showGrid(name, value, phpfile) 
{ 
xmlhttp=GetXmlHttpObject(); 
if (xmlhttp==null) 
{ 
alert ("Browser does not support HTTP Request"); 
return; 
} 
var url=phpfile+".php"; 
url=url+"?"+name+"="+value; 
url=url+"&sid="+Math.random(); 

xmlhttp.onreadystatechange=stateChanged; 
xmlhttp.open("GET",url,true); 
xmlhttp.send(null); 
} 

Answer 1

tout d'abord fournir ces boîtes de sélection avec des identifiants uniques et passer ensuite l'identifiant de la zone de sélection précédente à la fonction et dans la fonction obtenir l'élément DOM en utilisant document.getElementById puis récupérez le nom et la valeur de cet élément.

<select name="test_id" id="test_id"> 


<select name="statistics" onchange="showGrid('test_id', THIS.value)"> 

function showGrid(id, phpfile) 
{ 
var previousElem = document.getElementById (id); 

xmlhttp=GetXmlHttpObject(); 
if (xmlhttp==null) 
{ 
alert ("Browser does not support HTTP Request"); 
return; 
} 
var url=phpfile+".php"; 
url=url+"?"+previousElem.name+"="+previousElem.value; 
url=url+"&sid="+Math.random(); 

xmlhttp.onreadystatechange=stateChanged; 
xmlhttp.open("GET",url,true); 
xmlhttp.send(null); 
} 

Answer 2

Si tous vos choix sont frères et soeurs (enfants d'un parent), utilisez previousSibling pour détecter prev select.

pseudocode:

<select name='prev'>....</select> 
<a>other tag</a> 
<select name='x' onchange='handle(this);'>...</select> 

function handle(select) { 
    // find previous 
    var prev = select.previousSibling; 
    while (prev && prev.nodeName.toLowerCase() === 'select') { 
     prev = prev.previousSibling; 
    } 
    if (prev && prev.nodeName.toLowerCase() === 'select') { 
     // found 
    } else { 
     // not found 
    } 

} 

Answer 3

Je viens de recevoir cette page sur Google pour 'javascript "élément de formulaire précédent". Comme je voulais juste une solution générique, j'ai essayé de lancer la mienne. Cela semble marcher correctement. Il y a probablement de meilleurs moyens, mais cela fait l'affaire.

function previous_form_element(form,element){ 
    for (i=1;i<form.elements.length;i++){ 
     if (form.elements[i] == element){ 
      return form.elements[i-1]; 
     } 
    } 
    return undefined; 
} 

... 
button.onclick = function(){ 
    alert(previous_form_element(this.form,this).value); 
}