Link to home
Start Free TrialLog in
Avatar of ahillman
ahillmanFlag for United States of America

asked on

How do I use onchange with a database driven select dropdown list?

Good Morning and thank you for any assistance!

I work in Coldfusion and have a form in which one of the items is a drop down list:

<select Name="PRequestID" class="severity">
      <option value="">--- Select Location ---</option>
      <cfoutput Query="PRequest">
               <option value="#PRequestID#">#PRequest#</option>
         </cfoutput>
</select>

What I want to do is add an onchange event to the select statement that should a particular item (there are two that would cause a reaction) then a div would show below that select box directing them to other actions.  In this case that this choice allows them to resolve their issue on their own and here is the link they can follow to resolve.

This is what I have for the select statement:
<div id="Request">
      <select Name="PRequestID" class="severity" id="PRequestID" onChange="viewInfo(PRequestID);">
        <option value="">--- Select Request Type ---</option>
            <cfoutput Query="PRequest">                                                                                                      <option value="#PRequestID#">#PRequest#</option>
            </cfoutput>                               
       </select>      
</div>                  

Then I have the following div element below my select statement:
<div id="detailContent" style="text-align:center; margin:5px;"></div>

Then I have a function that I created for the onChange:
<script type="text/javascript">
      // scripts for reports.cfm
      function getHTTPObject() { var xmlhttp; /*@cc_on @if (@_jscript_version >= 5) try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (E) { xmlhttp = false; } } @else xmlhttp = false; @end @*/ if (!xmlhttp && typeof XMLHttpRequest != 'undefined') { try { xmlhttp = new XMLHttpRequest(); } catch (e) { xmlhttp = false; } } return xmlhttp; } var http = getHTTPObject(); // We create the HTTP Object

      function viewInfo(PRequestID)      {

            *****This is where I don't know the code*****

            
      function viewHandleHttpRes() {
            if (http.readyState == 4) {
                  results = http.responseText;
                  document.getElementById('detailContent').innerHTML = results;
      }
</script>

The function is the part I am having a hard time with.  I don't know javascript.  I know that I need the onChange to be in my select statement and I know that i need to have the function place the information into the div below the select statement but I don't know the following:

How to say if PRequestID is 10 or 32 then show the links and information in the div below the select statement.

I hope this makes sense... if not I can see if I can clarify.

Thanks!
Avatar of HonorGod
HonorGod
Flag of United States of America image

I'm sorry, but I'm a bit confused.  

Here is the scenario as I understand it.
Given that the user makes a specific selection of a drop down list,
you want to use Ajax to contact an application on the server, and retrieve
a specific set of actions.  When this response is received, you want to...

what?  Create a new selection list?

Is that it?
Avatar of ahillman

ASKER

Not really and perhaps I am going about it all wrong....

What I want to do is loop through my drop down list which is dynamically created.  If a particular item is selected then I want to show a div tag below the select section and display a message with a hyperlink in it.

Basically - this is a help form.  If the user selects an item that they can resolve on their own then I want to tell them that they can do this on their own, and give them the link on where this issue can be resolved.

I thought that by using an onChange if a particular ID is selected then it would trigger this function to display the information to the user.

Does that make more sense?
Will the hyperlink be part of the text returned from the server?

Here is my understanding.  Given a particular select list, a user makes a selection
This will cause a request to go to the server, based upon that selection.  The response
will be used  to populate a div, and may (or may not) include hyperlinks.

Should a different selection be made, then another request would be made to the server to (re)populate the div.

Is this what you want?
INo the hyperlink would not be part of the server information. This would need to be included in the function.  The only information gathered from the server is the list of items to populate the drop down list.

The list is populated by a db and there will be no action taken for most of the items in the list.  However, i wish to create an action should the user select password or network password.  If either of these are selected then I need to display something that states they can do this on their own and give them the hyperlink to the tool for this resolution.

They have the option to ignore this and continue.  If they choose to ignore then upon submittal of the form they need to be given the option AGAIN to resolve their problem on their own and will need to be presented with the information and hyperlink to the tool.

I know this is basic stuff for you guys/gals but i just don't understand javascript enough to make it happen.  

ASKER CERTIFIED SOLUTION
Avatar of dakyd
dakyd

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
This worked perfectly.  I just had to make a few modifications to match the need but was exactly what I was looking for.  Thanks!