Question

Dropdown list 1:

<select name="ddlArea" onchange="showState(this.value)">  

Dropdown list 2:

<select name="ddlFType" onchange="showState(this.value)">  

I want to get selected values of both dropdown lists in showState function. I want to invoke same function as the ajax request will be processing on different page which requires both the parameters Area and FType.

Function:

function showState()
                {
                     var area_value = document.getElementById("ddlArea").value;
                     var ftype= document.getElementById("ddlFType").value;
                    if(document.getElementById("ddlFlat").value!="-1" )
                    {
                        xmlHttp=GetXmlHttpObject()
                        if (xmlHttp==null)
                        {
                            alert ("Browser does not support HTTP Request")
                            return
                        }
                        var url="vacant_do.jsp"
                        url=url+"?area_id="+area_value+"ftype"+ftype

                        xmlHttp.onreadystatechange=stateChange
                        xmlHttp.open("GET",url,true)
                        xmlHttp.send(null)

                    }
                    else
                    {
                        alert("Please Select Area Name");
                    }
                }

                function stateChange()
                {
                    if (xmlHttp.readyState==4 || xmlHttp.readyState==200)
                    {
                        document.getElementById("ddlFlat").innerHTML=xmlHttp.responseText
                         }
                }

Answer 1

Since you are just trying to invoke an AJAX Query with 2 parameters, I wouldn’t push in the value through the onChange.

Combo -Box 1:-  
<select name="ddlArea" id="ddlArea" onchange="showState()">  
Combo -Box 2:-  
<select name="ddlFType" id="ddlFType" onchange="showState()">  

and then:

function showState()  {  
   var area = document.getElementById('ddlArea').value;
   var fType= document.getElementById('ddlFType').value;
   ....invokeAJAX request....
}

You COULD do this via some sort of prototype/closure method, but really, you already know where to get the information from, and it’s not going to change on the page