Question

in aspx file I have

<asp:DropDownList ID="DropDownList1" runat="server" >
</asp:DropDownList>
<asp:DropDownList ID="DropDownList2" runat="server">
</asp:DropDownList>
<asp:Button ID="load_data" runat="server" Text="<%$ Resources : load_data %>"  
    onclick="load_data_class_Click" Visible="False"/>

Now I want to set button to be visible only after i made changes in 2 dropdownlists in javascript

how to do this?

Answer 1

The first problem is that you can’t use Visible=”false”, you need to use CSS and set visibility: hidden;, or display:none.

Once you’ve done that, you can do the following ->

Get the ID’s of the lists:

//id #1
var ddl1 = document.getElementById("DropDownList1");

//id #2
var ddl2 = document.getElementById("DropDownList2");

Now, we need to create an onChange function to grab the values, and test if they’re empty, if not, then we’ll show the button.

function showButton(){
  //out of <option value="3"> This is 3rd </option> you get:
  var selected1text = ddl1.option[ddl.selectedIndex].text; // returns: This is 3rd
  var selected1value = ddl1.option[ddl.selectedIndex].val; // returns: 3

  //out of <option value="75"> This is 75th </option> you get:
  var selected2text = ddl2.option[dd2.selectedIndex].text; // returns: This is 75th
  var selected2value = ddl2.option[dd2.selectedIndex].val; // returns: 75

  if(
    selected1text != "" &&
    selected1value != "" &&
    selected2text != "" &&
    selected2value != ""
  ){
    //Our select lists all have values. We can show our button now.

    //if you use visibility:hidden;
    document.getElementById('load_data').style.visibility='visible';

    //if you use display:none;
    document.getElementById('load_data').style.display='block';
  }else{
    //don't do anything.
  }
}

Then, in your dropdown list, you can add the onChange=showButton();

Should work.