Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 158
  • Last Modified:

Setting a Value to a Select Box

I have a 3 select boxed that get dynamically populated based on the previous selection.  When someone picks a state, workshops gets populated.  Instead of workshops getting populated with the very first workshopname, how can I have the very first thing say Please select a workshop?  I've posted the code to this page below.  Any help would be appreciated Thanks Nick



<cfquery name="GetFacilitators" datasource="aptvre">
SELECT ws_facilitator .*, ws_facilitatortoworkshop.WorkshopId FROM ws_facilitator
INNER JOIN ws_facilitatortoworkshop ON ws_facilitator.FacilitatorId = ws_facilitatortoworkshop.FacilitatorId
ORDER BY ws_facilitatortoworkshop.WorkshopID, LastName
</cfquery>

<!--Then the part to generate the javascript arrays:-->

<cfquery name="GetStates" datasource="aptvre">
SELECT * FROM ws_state
ORDER BY StateName
</cfquery>
<cfquery name="GetWorkshops" datasource="aptvre">
SELECT * FROM ws_workshop
ORDER BY StateId, WorkshopName
</cfquery>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Three Selects Related</title>
<link rel="stylesheet" type="text/css" href="../../styles/intasc_form.css" />
<script type="text/javascript" language="JavaScript">
<!--
/* Dynamically populate Workshop select box based on seleted stateID and then Facilitators based on workshopID */
// Create an array to hold Workshops and Facilitators
var WorkshopArray = new Array;
var FacilitatorArray = new Array;

// Define a custom Javascript object type to represent a single Workshop
function Workshop(workshopid, stateid, workshopname)
{
     this.workshopid = workshopid;
     this.stateid = stateid;
     this.workshopname = workshopname;
}

// Define a custom Javascript object type to represent a single Facilitator
function Facilitator(facilitatorid, workshopid, lastName)
{
     this.facilitatorid = facilitatorid;
     this.workshopid = workshopid;
     this.lastName = lastName;
}

<!--- For each Workshop, append a new Workshop object to the array of Workshops --->
<cfoutput query="GetWorkshops">
     WorkshopArray[WorkshopArray.length] = new Workshop("#JSStringFormat(WorkshopId)#", "#JSStringFormat(StateId)#", "#JSStringFormat(WorkshopName)#");
</cfoutput>

<!--- For each Facilitator, append a new Facilitator object to the array of Facilitators --->
<cfoutput query="GetFacilitators">
     FacilitatorArray[FacilitatorArray.length] = new Facilitator("#JSStringFormat(FacilitatorId)#", "#JSStringFormat(WorkshopId)#", "#JSStringFormat(lastName)#");
</cfoutput>

/* Fill the Workshop select box based on the stateID*/
function fillWorkshops()
{
     // Stop if there is no selected ParentID
     if (document.formWorkshops.stateID.selectedIndex == -1)
     {
          return;
     }
     
     var stateID = document.formWorkshops.stateID.options[document.formWorkshops.stateID.selectedIndex].value;
     
     // Remove all options in the Workshop select box
     document.formWorkshops.WorkshopID.options.length = 0;
     
     // For each item in the Workshoparray ...
     for (var i = 0; i < WorkshopArray.length; i++)
     {
          // If the Workshop's stateIDFK is the same as the currently selected stateID
          if (WorkshopArray[i].stateid == stateID)
          {
               // Put a new option in the Workshop select box
               document.formWorkshops.WorkshopID.options[document.formWorkshops.WorkshopID.options.length] = new Option(WorkshopArray[i].workshopname, WorkshopArray[i].workshopid);
          }
     }
}

/* Fill the Facilitators select box based on the WorkshopID*/
function fillFacilitators()
{
     // Stop if there is no selected ParentID
     if (document.formWorkshops.WorkshopID.selectedIndex == -1)
     {
          return;
     }
     
     var WorkshopID = document.formWorkshops.WorkshopID.options[document.formWorkshops.WorkshopID.selectedIndex].value;
     
     // Remove all options in the Facilitators select box
     document.formWorkshops.FacilitatorID.options.length = 0;
     
     // For each item in the Facilitatorarray ...
     for (var i = 0; i < FacilitatorArray.length; i++)
     {
          // If the Facilitator's WorkshopIDFK is the same as the currently selected WorkshopID
          if (FacilitatorArray[i].workshopid == WorkshopID)
          {
               // Put a new option in the Facilitator select box
               document.formWorkshops.FacilitatorID.options[document.formWorkshops.FacilitatorID.options.length] = new Option(FacilitatorArray[i].lastName, FacilitatorArray[i].facilitatorid);
          }
     }
}
-->
</script>
</link>
</head>

<body>
<center>
<div id="survey">
  <div id="logo">&nbsp;<a href="http://www.bc.edu/efeevaluation"><img src="../images/efe_surveylogo.gif" alt="intasc" width="87" height="54" border="0" /></a></div>
  <form name="formWorkshops" action="ws_confirm.cfm">
    <p>
      <select name="stateID" onChange="fillWorkshops()" style="width: 120px;">
        <option value="">Select State</option>
        <cfoutput query="GetStates">
          <option value="#GetStates.stateid#">#GetStates.statename#</option>
        </cfoutput>
      </select>
    </p>
    <p>
      <select name="WorkshopID" onChange="fillFacilitators()" style="width: 500px;">
      </select>
    </p>
    <p>
      <select name="FacilitatorID" style="width: 200px;">
      </select>
    </p>
    <p>
      <input type="submit" name="Submit" value="Submit">
      </label>
</p>
  </form>
</div>
</body>
</html>
0
nmarano
Asked:
nmarano
1 Solution
 
PluckaCommented:
nmarano,

> <!--- For each Workshop, append a new Workshop object to the array of
> Workshops --->
> <cfoutput query="GetWorkshops">
>      WorkshopArray[WorkshopArray.length] = new Workshop("#JSStringFormat(WorkshopId)#",
> "#JSStringFormat(StateId)#", "#JSStringFormat(WorkshopName)#");
> </cfoutput>

<!--- For each Workshop, append a new Workshop object to the array of Workshops --->
WorkshopArray[WorkshopArray.length] = new Workshop("0", "0", "Select Workshop");
<cfoutput query="GetWorkshops">
     WorkshopArray[WorkshopArray.length] = new Workshop("#JSStringFormat(WorkshopId)#", "#JSStringFormat(StateId)#", "#JSStringFormat(WorkshopName)#");
</cfoutput>

Regards
Plucka
0
 
nmaranoAuthor Commented:
Plucka,

I tried this code, but didn't get a different result.  Can you tell me where I would have to output this info on the page to get it to display Select Workshop?  The workshop gets filled once I pick a state so I am not sure if that is an issue

Thanks
Nick
0
 
ExpertAdminCommented:
Side question...why are you doing this in Javascript? It would make more sense to me to post back to the server between selections. That would make the code MUCH simpler.

M@
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
nmaranoAuthor Commented:
ExpertAdmin,

To be honest with you, I wasn't sure how to go about doing and of this, and one of the other experts pointed me in this direction

Nick
0
 
ExpertAdminCommented:
OK.

I know this isn't answering your original question, but the only reason I would see for using JavaScript arrays is if you really didn't want the page to reload between selections. If that is the case, then you have the right approach. But as you see, it adds complications along the way. One of those complications is that since your select boxes are based on javascript arrays, it is difficult to default it to a value.

You should be able to add another item in the array that displays "Please Select a Workshop", but having it default to that one is going to be tricky since HTML uses the "selected" property of the item in the select to determine which one to display by default.

I don't know if this will work, but give it a shot:

Change this line:

      <select name="WorkshopID" onChange="fillFacilitators()" style="width: 500px;">
      </select>

to:

      <select name="WorkshopID" onChange="fillFacilitators()" style="width: 500px;">
           <option value="" SELECTED>Select a Workshop</option>
      </select>

M@
0
 
nmaranoAuthor Commented:
I tried it, but because this gets filled upon the previous selection, that didn't work.

Thanks
Nick
0
 
ExpertAdminCommented:
Yea, so I figured.

I would recommend going back to the person who helped you create that script and pose the question to them. I don't see a straightforward way to do it.

M@
0
 
bhinshawnc1Commented:
I perform this kind of related selection via a combination of CF and javascript.

On the project page I include a query to the AM_Groups, this builds the listing for the select from a db table

<cfinclude template="qry_AM_groups.cfm"> or you can build it in the page just like you did <cfquery name="GetFacilitators" ...

I like the include as I can reuse that qry many times over.

then in the form the user selects the group and when that item changes we update the list of engineers for that group that can be chosen

<select name="am_group"  style="width: 350px;" onChange="updateEngGroup();"  >
<cfif isblank is "yes"> <!--- new record --->
   <option value=0 selected>Please select an Engineering Group</option>
   <cfloop query="qry_AM_Groups">
      <option value="#qry_AM_Groups.am_group_id#">#qry_AM_Groups.am_group_name# (#qry_AM_Groups.last_name#, #qry_AM_Groups.first_name#)</option>
    </cfloop>
<cfelse> <!--- existing record --->
   <option value=0 selected>Please select an Engineering Group</option>
       <cfloop query="qry_AM_Groups">
        <cfif qry_AM_Groups.am_group_id is #qry_project.am_group_id#> <!--- if group found in record, show that group --->
         <option value="#qry_AM_Groups.am_group_id#" selected>#qry_AM_Groups.am_group_name# (#qry_AM_Groups.last_name#, #qry_AM_Groups.first_name#)</option>
          <cfelse> <!--- else show the list of groups --->
             <option value="#qry_AM_Groups.am_group_id#">#qry_AM_Groups.am_group_name# (#qry_AM_Groups.last_name#, #qry_AM_Groups.first_name#)</option>
             </cfif>
        </cfloop>
</cfif>
</select>  

at the start of the form in a
<script>
function updateEngGroup()
{
ifrHidden.location = 'updateProjectPage.cfm?group=' + document.projEntry.am_group.value;
}
</script>

then the iframe

<iframe name="ifrHidden" width="100%" height="1" style="display: none;"></iframe>

and now the updateprojectpage.cfm

<cfparam name="group" default="">

<cfif group neq "">
      <cfquery name="getEngList" datasource="#dbname#" username="#dbuser#" password="#dbpw#">
            SELECT             id, first_name, last_name, group_id
            FROM             resources
            WHERE             group_id = #group#
      </cfquery>

<script language="JavaScript">
var engList = '';
      
engList += '<select name="pri_eng" style="width: 225px;" onchange="updatePriEngContact();updateSecEng();updatePeerRev();">
<option value="0" selected>Please select an Engineer</option>';
<cfloop query="getEngList">
engList += '<option value="#getEngList.id#">#replace(getEngList.Last_Name,"'","&rsquo;","ALL")#, #replace(getEngList.First_Name,"'","&rsquo;","ALL")# (#getEngList.ID#)</option>';
</cfloop>
engList += '</select>&nbsp;';
parent.priEng.innerHTML = engList;
parent.secEng.innerHTML = '<select name="sec_eng" style="width: 225px;"><option value="0" selected></option></select>';
</script>
</cfif>

this page takes what's fed into the query and updates the project page with a list of choices based on the first selection of group, then once the onchange fires it does other things like update their contact info and then starts limiting the second engineer that can be chosen in the same fashion

if you can use this structure, just be careful replacing the names, that's usually I mess up in the javascript
0
 
nmaranoAuthor Commented:
Thank you all for the suggestions.  I posted this question in the JavaScript Forum and here is the solution below.....

function fillWorkshops()
{
     // Stop if there is no selected ParentID
     if (document.formWorkshops.stateID.selectedIndex == -1)
     {
          return;
     }
     
     var stateID = document.formWorkshops.stateID.options[document.formWorkshops.stateID.selectedIndex].value;
     
     // Remove all options in the Workshop select box
     document.formWorkshops.WorkshopID.options.length = 0;
     var ox=0;
     document.formWorkshops.WorkshopID.options[ox++] = new Option('Select WorkShop', '-1');
     
     // For each item in the Workshoparray ...
     for (var i = 0; i < WorkshopArray.length; i++)
     {
          // If the Workshop's stateIDFK is the same as the currently selected stateID
          if (WorkshopArray[i].stateid == stateID)
          {
               // Put a new option in the Workshop select box
               document.formWorkshops.WorkshopID.options[ox++] = new Option(WorkshopArray[i].workshopname, WorkshopArray[i].workshopid);
          }
     }
     document.formWorkshops.WorkshopID.options.length = ox;
}
0
 
CetusMODCommented:
Closed, 500 points refunded.
CetusMOD
Community Support Moderator
0

Featured Post

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now