How to get value of dropdown in javascript when it is in update panel

Question

I'm binding ddlstate on selectedindechanged event of ddlCountry only. ddlState dropdown value checking in javascript if it is "-1" then generate alert. When I check the value in javascript, it shows me a blank value, "". When I use Postbacktrigger for ddlState , I can get the value with javascript, but the smoothness of the page using async is better than Postbacktrigger. That is why I use async trigger. My main problem is ddlState 's value is not getting in javascript when I use async trigger while I can get it using Postback trigger.

JavaScript validation:

function validateForm()
{
    var ddlCountry = document.getElementById('<%=ddlCountry.ClientID%>');
    var ddlState = document.getElementById('<%=ddlState.ClientID%>');
    if (ddlCountry .value == "-1")
    {
        alert("Country  should not be blank.");
        ddlCountry .focus();
        return false;
    }
    if (ddlState .value == "-1")
    {
        alert("State should not be blank.");
        ddlState .focus();
        return false;
    }

    return true;
}

ASPX code:

<asp:DropDownList ID="ddlAcqModalityList" runat="server" CssClass="csstextbox" Width="207px" AutoPostBack="true" OnSelectedIndexChanged="ddlAcqModalityList_SelectedIndexChanged">
</asp:DropDownList>
<asp:UpdatePanel ID="updatePanelState" runat="server">
    <ContentTemplate>
        <asp:DropDownList ID="ddlState " runat="server" CssClass="csstextbox" Width="177px">
        </asp:DropDownList>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="ddlCountry" EventName="SelectedIndexChanged" />
    </Triggers>
</asp:UpdatePanel>
<asp:Button ID="btnSave" runat="server" Width="80px" OnClientClick="return validateForm();" Text="Save" CssClass="cssbutton" OnClick="btnSave_Click" />

Code Behind:

protected void Page_Load(object sender, EventArgs e)
{
    if(!IsPostBack)
    {
        BindCountry()
        {
            strSQL = @"SELECT Country_ID,Country_Desc
                       FROM Country_Master";

            DataTable dataTableState = null;
            dataTableState = objSqlDbComm.ExecuteDatasetQuery(strSQL).Tables[0];

            var dictioneryCountry = new Dictionary<int, string>();
            foreach(DataRow dr in dataTableStudy.Rows)
            {
                dictioneryCountry .Add(Convert.ToInt32(dr["Country_ID"]), dr["Country_Desc"].ToString());
            }

            ddlCountry.DataTextField = "Value";
            ddlCountry.DataValueField = "Key";
            ddlCountry.DataSource = dictioneryCountry;
            ddlCountry.DataBind();
            ddlCountry.Items.Insert(0, new ListItem("[Select]", "-1"));
            ddlCountry.Items[0].Selected = true;
        }
    }
}

protected void ddlCountry_SelectedIndexChanged(object sender, EventArgs e)
{
    int countryID = Convert.ToInt32(ddlCountry.SelectedItem.Value);

    ifcountryID == -1)
    {
        return;
    }

    strSQL = @"SELECT State_ID,State_Desc
               FROM State_Master
               WHERE countryID = '" + countryID + @"';

    DataTable dataTableState = null;
    dataTableState = objSqlDbComm.ExecuteDatasetQuery(strSQL).Tables[0];

    var dictioneryState = new Dictionary<int, string>();
    foreach(DataRow dr in dataTableStudy.Rows)
    {
        dictioneryState .Add(Convert.ToInt32(dr["State_ID"]), dr["State_Desc"].ToString());
    }

    ddlState.DataTextField = "Value";
    ddlState.DataValueField = "Key";
    ddlState.DataSource = dictioneryState;
    ddlState.DataBind();
    ddlState.Items.Insert(0, new ListItem("[Select]", "-1"));
    ddlState.Items[0].Selected = true;
}

Answer 1

First of all I think you cannot call "ddlCountry.value" directly, that id is for the server control! You need to use, to get the client id.

document.getElementById('ddlCountry').value;

Another thing if you want to fire event on javascript when you change the dropdownlist you can add onchange client event like this, this will call a javascript function without posting the page (Refresh):

<asp:DropDownList ID="ddlState " runat="server" 
CssClass="csstextbox" Width="177px" onchange="validateForm()">

Then you can remove the eventtrigger and the updatepanel if you want.

Hope it helps.

Answer 2

        //javascript code
var hidStateValue=document.getElementByID('<%=hidStateValue.ClientID%>');
        if (hidStateValue.value == "-1")
                    {
                        alert("State should not be blank.");                
                        return false;
                    }

        //aspx code
        <asp:DropDownList ID="ddlState" AutoPostBack="true"  runat="server" CssClass="csstextbox" Width="177px" onselectedindexchanged="ddlState_SelectedIndexChanged">                                                                </asp:DropDownList>
            <asp:HiddenField ID="hidStateValue" runat="server" />

        //Code behind

          protected void ddlCountry_SelectedIndexChanged(object sender, EventArgs e)
         {
            //code
            hidStateValue.Value = ddlState.SelectedItem.Value;
         }
        protected void ddlState_SelectedIndexChanged(object sender, EventArgs e)
            {       
                hidStateValue.Value="";
                hidStateValue.Value = ddlState.SelectedItem.Value;      
            }