Classic ASP: Dynamic dropdown bases on a radio button selected

Question

I want to display the list in dropdown based on one of the radio buttons selected. The database has the column for the Code such as "A" and "O". On the page, I want to display 3 radio buttons as A, O, and All. A = Apples, O = Oranges and All = Apples and Oranges. Lets say, when the user selected A then the dropdown automatically list all type of apples or selected O then dropdown should list all type of oranges, or All for both. The page should automatically display apples by default. How do I go about displaying the radio buttons on the page? Do I need JavaScript or use the record set for the radio button selected event? Please help

Answer 1

You could display the radio buttons just with "normal" (static) HTML.

Then define the onclick event and make an ajax request to your classic ASP site. Send back the contents of the dropdown depending on the value of the radio button in JSON or just HTML and fill the dropdown via JavaScript.

links:

link for JSON

jQuery (which is a cool javascript framework)

documentation for jQuery post (ajax request with jQuery)

As you never used JSON you could try sending the results as HTML like so:

<%
if request.form("act") = "loadDropdown" then
    dim html : html = ""
    
    select case request.form("which")
        case "A"
            ' load apples
            
            
            ' write recordset as html to client
            do while not rs.eof
                html = html & "<option value='" & rs.fields("applename").value & "'>" &     rs.fields("applename").value & "</option>"
                
                rs.movenext
            loop
            response.write html
        case "O"
            ' load oranges
            
            
            ' write recordset as html to client
            do while not rs.eof
                html = html & "<option value='" & rs.fields("applename").value & "'>" & rs.fields("applename").value & "</option>"
                
                rs.movenext
            loop
            response.write html
        case "all"
            ' load all fruits
            
            
            ' write recordset as html to client
            do while not rs.eof
                html = html & "<option value='" & rs.fields("applename").value & "'>" & rs.fields("applename").value & "</option>"
                
                rs.movenext
            loop
            response.write html
    end select
    
    response.end
end if
%>
<script>
    function loadDropdown(which) {
        $.post("mySite.asp", { act: "loadDropdown", which: which }, function(data) {
            
            // fill dropwon with results of ajax:
            $("#myDropdown").html( data )
        });
    }
</script>
<input type="radio" name="fruits" onclick="loadDropdown('A')"> Apples<br>
<input type="radio" name="fruits" onclick="loadDropdown('O')" > Oranges<br>
<input type="radio" name="fruits" onclick="loadDropdown('all')"> All<br>

<select name="myDropdown" id="myDropdown"></select>

Answer 2

We did stuff like this with javascript arrays. We assigned what we called a DataType to each group of values. For example Apples would have a DataType of 10; Oranges a DataType of 20, Pears would have a DataType of 30 etc. The radio button would have corresponding values. RadioButton.Apple = 10, RadioButton.Orange = 20, RadioButon.Pears = 30, etc.

We would bring back all the data for all datatypes and store it inside a javascript array. We setup onClick or onChange events for the radio buttons and repopulated our dropdows from the javascript arrays depending on the datatype selected in the radio button.

Works like a champ.