469,326 Members | 1,576 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,326 developers. It's quick & easy.

How to use OnChange in a select (drop down list) box

139 100+
Hi,

I have a CF query that extracts all the information from a db and sprays in into a table.

I'd like a drop down list box that can filter this data based on the value in the box. IE at loading it shows 'All' jobs, but when changed to 'Completed' it just shows Completed jobs. I'd like to use the onChange event to trigger this.

What's the best way of achieving this in Cold Fusion?

Thanks
Neil
Oct 14 '10 #1
9 13432
acoder
16,027 Expert Mod 8TB
The newer versions of Coldfusion have tags that probably allow you to do this without much knowledge of JavaScript/Ajax. If you're using an older version, then you'll need to have at least some basic JavaScript knowledge unless you use a submit button instead of directly changing via an onchange.

As for the Coldfusion part, you could use a Query of Queries together with a cached query which queries the query returned rather than the database each time, though it's not necessary.

Should it be instant, or can the change happen with a page change?
Oct 14 '10 #2
ndeeley
139 100+
I'm using CF MX (5 I think) so that rules out any easy option! I am using a submit button at the moment, with a form action to a copy of the page. I'd rather keep it all in one page - should I set up a variable and use IsDefined to find if the submit button has attributed it a value?
Oct 14 '10 #3
ndeeley
139 100+
Ah,

I think I have done it but with one problem.

I created a form with the same action as the page:

Expand|Select|Wrap|Line Numbers
  1. <form action="TB_MyTasksGIS.cfm" method="post">
  2.         Tasks to show
  3.         <select name="changeitem" class="droplist">
  4.         <option value="*">All</option>
  5.         <option value="Not Begun">Not Begun</option>
  6.         <option value="Started">Started</option>
  7.         <option value="Pending">Pending</option>
  8.         <option value="Completed">Completed</option>
  9.         </select>
  10.         <input type="submit" value="submit" class="buttons">
  11.         </form>
  12.  
then set up an cf IsDefined to catch it:

Expand|Select|Wrap|Line Numbers
  1. <cfif IsDefined("form.changeitem")>
  2.  
  3. <cfquery datasource="taskbook" name="GetMyTasks">
  4. select        T.ID, 
  5.             T.WorkID, 
  6.             T.CustomerName,
  7.             T.Dept,
  8.             T.Location,
  9.             T.ContactNo,
  10.             T.EmailAddress,
  11.             T.TaskTypeFK,
  12.             T.TaskDetails,
  13.             T.ChargeableYN,
  14.             T.ChargeCode,
  15.             T.JobStatusFK,
  16.             T.AssignedToFK,
  17.             T.AssignedNotes,
  18.             T.AssignedByFK,
  19.             T.AssignedStatusFK,
  20.             T.StartDate,
  21.             T.PendReasonFK,
  22.             T.CompletionDate,
  23.             T.TimeTaken,
  24.             T.CompletionNotes,
  25.             T.FileServerFK,
  26.             T.FileLoc,
  27.             T.RequestDate,
  28.             T.AddedBy,
  29.             S.FirstName,
  30.             S.Surname,
  31.             S.LoginName
  32. from        tblTaskBooker T left outer join tblStaff S
  33. on            T.AddedBy = S.LoginName
  34. where        AddedBy = '#username#' and JobStatusFK = '#form.changeitem#'
  35. order by    ID
  36. </cfquery>
  37.  
  38. <cfelse>
  39.  
  40. ..same code again with no "and JobStatusFK"
  41.  
  42. </cfif>
  43.  
  44.  
which all works fine - I just now can't get the table to show all the records again if selected from the list. I'm assuming my value in the select 'All' field is wrong. I've tried ="" and ="*" but neither work. Any idea what I am doing wrong?
Oct 14 '10 #4
acoder
16,027 Expert Mod 8TB
You need to get rid of the condition to show all the records.

You can use an empty string and use cfparam to give a default value, then when "changeitem" is empty, you can remove the condition.

In fact, you could have one query and have the cfif around the condition:
Expand|Select|Wrap|Line Numbers
  1. where AddedBy = '#username#'
  2. <cfif form.changeitem NEQ "">
  3.     and JobStatusFK = '#form.changeitem#'
  4. </cfif>
You should also be using cfqueryparam for any user input into a query.
Oct 15 '10 #5
ndeeley
139 100+
All changed!

Brilliant - thanks very much. Saved me a lot of code!

Cheers
Neil
Oct 15 '10 #6
ndeeley
139 100+
Hi,

I've used this script successfully but now have a small amendment.

I have two of the same scripts on the same page, but with different form.changeitem names. obviously because of the default at the top when I use either of the forms the other defaults back to showing that value, when I want to keep it displaying the information the user has already selected:

Expand|Select|Wrap|Line Numbers
  1. <cfparam name="form.changeitem" default="">
  2. <cfquery datasource="taskbook" name="GetMyTasks">
  3.     select        T.ID, 
  4.                 T.WorkID, 
  5.                 T.CustomerName,
  6.                 T.Dept,
  7.                 T.Location,
  8.                 T.ContactNo,
  9.                 T.EmailAddress,
  10.                 T.TaskCategoryFK,
  11.                 T.TaskTypesFK,
  12.                 T.TaskDetails,
  13.                 T.ChargeableYN,
  14.                 T.ChargeCode,
  15.                 T.JobStatusFK,
  16.                 T.AssignedToFK,
  17.                 T.AssignedNotes,
  18.                 T.AssignedByFK,
  19.                 T.AssignedStatusFK,
  20.                 T.StartDate,
  21.                 T.PendReasonFK,
  22.                 T.CompletionDate,
  23.                 T.TimeTaken,
  24.                 T.CompletionNotes,
  25.                 T.FileServerFK,
  26.                 T.FileLoc,
  27.                 T.RequestDate,
  28.                 T.AddedBy,
  29.                 S.FirstName,
  30.                 S.Surname,
  31.                 S.LoginName
  32.     from        tblTaskBooker T left outer join tblStaff S
  33.     on            T.AddedBy = S.LoginName
  34.     where        AddedBy = '#username#'
  35.                 <cfif form.changeitem NEQ ""> 
  36.                 and JobStatusFK = '#form.changeitem#' 
  37.                 </cfif>
  38.     order by    RequestDate desc
  39. </cfquery>
  40.  
  41. <cfparam name="form.changeAitem" default="">
  42.  
  43.  
  44.         <cfquery datasource="taskbook" name="GetMyATasks">
  45.         select        T.ID, 
  46.                     T.WorkID, 
  47.                     T.CustomerName,
  48.                     T.Dept,
  49.                     T.Location,
  50.                     T.ContactNo,
  51.                     T.EmailAddress,
  52.                     T.TaskCategoryFK,
  53.                     T.TaskTypesFK,
  54.                     T.TaskDetails,
  55.                     T.ChargeableYN,
  56.                     T.ChargeCode,
  57.                     T.JobStatusFK,
  58.                     T.AssignedToFK,
  59.                     T.AssignedNotes,
  60.                     T.AssignedByFK,
  61.                     T.AssignedStatusFK,
  62.                     T.StartDate,
  63.                     T.PendReasonFK,
  64.                     T.CompletionDate,
  65.                     T.TimeTaken,
  66.                     T.CompletionNotes,
  67.                     T.FileServerFK,
  68.                     T.FileLoc,
  69.                     T.RequestDate,
  70.                     T.AddedBy,
  71.                     S.FirstName,
  72.                     S.Surname,
  73.                     S.LoginName
  74.         from        tblTaskBooker T left outer join tblStaff S
  75.         on            T.AssignedByFK = S.LoginName
  76.         where        AssignedStatusFK = 'Assigned' and AssignedToFK = '#username#' and AddedBy <> '#username#'
  77.                         <cfif form.changeAitem NEQ ""> 
  78.                         and JobStatusFK = '#form.changeAitem#' 
  79.                         </cfif>
  80.         order by    RequestDate desc
  81.         </cfquery>
  82.  
How can I ensure that the lower form shows the form.ChangeAitem value instead of resetting it back to default when the page refreshes? I've tried using:

Expand|Select|Wrap|Line Numbers
  1. <cfif Not IsDefined ("form.changeitem")
  2. ..set default
  3. <cfself>
  4. ..run code with form.changeitem value
  5. </cfif>
  6.  
but I can't get this to work!

Thanks
Mar 28 '11 #7
acoder
16,027 Expert Mod 8TB
How does the page refresh? Is it a form post?

If it is, you can pass the current value(s) of changeitem as a hidden field(s).
Mar 28 '11 #8
ndeeley
139 100+
Yes, it is. I'll try passing the value as a hidden field in the url...

Let you know how I get on.

Thanks acoder!
Mar 28 '11 #9
acoder
16,027 Expert Mod 8TB
A quick note: if you pass a value in the URL, it would be accessed as url.fieldname. To have the value accessible as form.fieldname, you need to post the form.
Mar 28 '11 #10

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

4 posts views Thread by shlomi.schwartz | last post: by
1 post views Thread by Rob Meade | last post: by
2 posts views Thread by magix | last post: by
reply views Thread by mdpf | last post: by
reply views Thread by harlem98 | last post: by
reply views Thread by listenups61195 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.