How do I pass the value of the previous form element into an "onchange" javascript function?

Question

Hello,

I want to make some UI improvements to a page I am developing. Specifically, I need to add another drop down menu to allow the user to filter results.

This is my current code: HTML file:

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

This is pseudo code for what I want to happen:

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

How do I access the previous field's name and value? Any help much appreciated, thx!

Also, JS function for reference:

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

First of all provide these select boxes with unique ids and then pass the id of the previous select box to the function and in the function get the DOM element using document.getElementById and then retrieve the name and value of that element.

<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

If all your selects are siblings (children of one parent), use previousSibling to detect 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

I just got this page on a google for 'javascript "previous form element"'. As I just wanted a generic solution I tried rolling my own. It seems to work fine. There are probably better ways but this does the job.

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