472,129 Members | 1,626 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,129 software developers and data experts.

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

139 100+

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?

Oct 14 '10 #1
9 13965
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
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
139 100+

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>
then set up an cf IsDefined to catch it:

Expand|Select|Wrap|Line Numbers
  1. <cfif IsDefined("form.changeitem")>
  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>
  38. <cfelse>
  40. ..same code again with no "and JobStatusFK"
  42. </cfif>
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
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
139 100+
All changed!

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

Oct 15 '10 #6
139 100+

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>
  41. <cfparam name="form.changeAitem" default="">
  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>
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>
but I can't get this to work!

Mar 28 '11 #7
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
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
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 leo001 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.