Question

I have a drop down list that list different options to the user. I need the list to populate a text area based on what the user selects. I have the data already in my database and I want to be able to run a query based the user’s selection from the drop down list.

This is how my select tag looks like right now:

<select name="procedure" onChange="">
            <option value="">Select Procedure</option>
            <cfloop query="procedures">
                <option value="#procedureId#">#procedureName#</option> 
            </cfloop>
        </select>  

And this is my text area:

  <textarea name="procedureDescription" cols="80" rows="6">#the query output will go here#</textarea><br />

Is there a way to use onSelectChange function to control a server side query with Ajax?

I hope my thoughts are clear, if you need more info please ask.

Answer 1

Yes, unless I misunderstand, you should be able to do this using an Ajax request. The onchange method should look something like this:

function handleProcedureChange()
{
    var selectedVal = $(this).val();
    var url;  // TODO set procedure URL here, using selectedVal as needed

    $.get(url, function(procedureResult) {
        $("#procedureDescription").text(procedureResult);
    });
}

Then you’d need to set up the server-side method to run the procedure and return the result as plain text.