dropdown form does not specify url.bureauID -- search query fails

ColdFusion 9
MS SQL Server 2012

My dropdown form at http://www.doivista.org/ourSites.cfm is giving me some trouble. Maybe this is very simple, but I cannot figure out two things:

1) how to get the form action to specify url.bureauID -- when I search on a bureau, I get error "Element BUREAUID is undefined in URL."

2) how to get the dropdown form to select a value by default, in case someone clicks the Search button without selecting a bureau to search for

The client really this bureau search to display in dropdown format. =) I've been having some trouble with it. Thank you for your help.

Eric

<cfquery name="getBureaus" datasource="#application.datasource#">
SELECT bureauID, bureauTitle
FROM #REQUEST.BureauTable#
ORDER BY bureauTitle
</cfquery>

	<!--- Form begins here --->
	<form action="/showBureauRecord.cfm" method="post" enctype="multipart/form-data" class="ebwebworkForm">
    
<ul><li>
 <label for="bureauTitle"><h3>Search Bureaus:</h3></label>
   <select size="6"
    multiple="no"
	tabindex="1">
   <cfoutput query="getBureaus">  
    <option value="/showBureauRecord.cfm?bureauID=#getBureaus.bureauID#">#getBureaus.bureauTitle#</option>
    </cfoutput>
</select>
         
</li>

         <li>
<div class="submitButton">
   <button type="submit" class="green" tabindex="2">Search</button>
</div>  
</li>
</ul> 
 </form>

Open in new window

LVL 3
Eric BourlandAsked:
Who is Participating?
 
_agx_Connect With a Mentor Commented:
The form uses method="post". So any selection would end up in the FORM scope, not URL. That said, your select list doesn't have a name. Fields must have a name or they won't be submitted. Also, the list "value" should be the ID - not a URL string.

<!--- change the method to GET and give the list a "name" --->
<form action="/showBureauRecord.cfm" method="get" class="ebwebworkForm">
   <select name="bureauID" size="6" multiple="no" tabindex="1">
     <cfoutput query="getBureaus">  
        <option value="#getBureaus.bureauID#">#getBureaus.bureauTitle#</option>
      </cfoutput>
   </select>
    .... etc...
</form>

Open in new window


As far as requiring something to be selected, you could add some javascript to validate the selection before submitting. However, since javascript isn't fool-proof, I'd also add a default on /showBureauRecord.cfm. Then use #val()# in your query. Then even if nothing is selected - or the page is passed an invalid value - the query won't crash.

showBureauRecord.cfm

<cfparam name="URL.bureauID" default="0">

<!--- Then use VAL() in your query to convert the input to 0 if it's invalid --->
<cfquery ...>
      SELECT Columns FROM Table
       WHERE  bureauID = <cfqueryparam value="#VAL(URL.bureauID)#" ....>
</cfquery>

Open in new window

0
 
_agx_Connect With a Mentor Commented:
>> to select a value by default, in case someone clicks the Search button without s.electing a bureau

I misread that. Since it's not a multiple select list, I think it makes more sense to validate - and ask them to select a bureau before submitting.  This simple jquery example shows one unobtrusive approach.

 
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
	$("#searchForm").submit(function( event ) {
		var selectedOption = $("#bureauID").prop("selectedIndex");
		var totalOptions = $("#bureauID option").length;
		if (selectedOption < 0 && totalOptions > 0) {
			$( "span" ).text("Please select a bureau" ).show().fadeOut( 3000 );
			event.preventDefault();
		}
		
		return;
	});
});
</head>
</script>
<body>

	<!--- change the method to GET and give the list a "name" --->
	<form id="searchForm" action="/showBureauRecord.cfm" method="get" class="ebwebworkForm">
	   <span></span><br>
	   <select id="bureauID" name="bureauID" size="6" multiple="no" tabindex="1">
	      <option value="1">Option 1</option>
	      <option value="2">Option 2</option>
	      <option value="3">Option 3</option>
	   </select>
	   <input type="submit">
	</form>
</body>
</html>

Open in new window

0
 
Eric BourlandAuthor Commented:
Makes sense. I am going to work on this today. _agx_, thank you as always. I hope your Sunday is going well.

Eric
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
Eric BourlandAuthor Commented:
Dear _agx_,

It's almost working. The parts about using method Get and giving the form a name make sense. That's working great.

The javascript solution looks like a good plan. I've been tinkering with it but can't quite get the script to work. I can click "Search" without selecting a bureau -- which of course creates an error: "Element BUREAUID is undefined in URL."

I read about this solution on the http://api.jquery.com/submit/ ... this looks like a cool solution, and I think I set it up as you suggested. Can you see anything wrong with this code?

As always, thanks so much. Hope your day is going well.

Eric

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
	$("#searchForm").submit(function( event ) {
		var selectedOption = $("#bureauID").prop("selectedIndex");
		var totalOptions = $("#bureauID option").length;
		if (selectedOption < 0 && totalOptions > 0) {
			$( "span" ).text("Please select a bureau, then click Search." ).show().fadeOut( 3000 );
			event.preventDefault();
		}
		
		return;
	});
});
</script>

<cfquery name="getBureaus" datasource="#application.datasource#">
SELECT bureauID, bureauTitle
FROM #REQUEST.BureauTable#
ORDER BY bureauTitle
</cfquery>

	<!--- Form begins here --->
    <form id="searchForm" action="/showBureauRecord.cfm" method="get" class="ebwebworkForm">
    <span></span><br>
<ul><li>
 <label for="bureauTitle"><h3>Search DOI VISTA Team Sites by Bureau:</h3></label>
   <select name="bureauID" size="6" multiple="no" tabindex="1">
   <cfoutput query="getBureaus">  
    <option value="#getBureaus.bureauID#">#getBureaus.bureauTitle#</option>
    </cfoutput>
</select>
         
</li>

         <li>
<div class="submitButton">
   <button type="submit" class="green" tabindex="2">Search</button>
</div>  
</li>
</ul> 
 </form>

Open in new window

0
 
Eric BourlandAuthor Commented:
That was it!

Works perfectly, and I understand the solution. Thanks as always, _agx_. I'll try not to bug you again this week. ;-)

I hope your weekend is going great. Take care.

Eric
0
 
_agx_Commented:
EDIT:
       
 $("#bureauID").prop("selectedIndex");

My jquery example uses the $("#id") selector syntax.. It assumes the select list will have the id="bureauID". Since your form field doesn't, the validation is skipped, so the form submits without doing any validation. Just add that "id" to the select, like in my example, and it'll work.

     <select id="bureauID" ...>  


Though I'd still recommend adding a cfparam on showBureauRecord.cfm, and use VAL() in your query, so the page doesn't error if the parameter is missing or isn't numeric.
0
 
_agx_Commented:
Sorry, I deleted/and resubmitted my comment so it was more clear :) (I'm never sure if EE notifies when you "edit" a comment).

Enjoy your weekend!
0
 
_agx_Commented:
I think EE has a bug :)  It let me delete a comment that was part of an accepted answer.
0
 
Eric BourlandAuthor Commented:
Got it. I did:

<cfquery name="getBureauProjects" datasource="#application.datasource#">
SELECT
b.bureauID,
b.bureauTitle,
p.projectID,
p.ProjectName,
p.bureauTitle,
p.State
FROM #REQUEST.BureauTable# b
INNER JOIN #REQUEST.ProjectsTable# p
ON p.bureauTitle = b.bureauTitle
WHERE b.bureauID = <cfqueryparam cfsqltype="cf_sql_integer" value="#val(url.bureauID)#">
ORDER BY p.State ASC
</cfquery>

and also:

<select id="bureauID" ...>  

Seems to be working really well. =)
0
 
_agx_Commented:
Yep. Don't forget the <cfparam name="URL.bureauID" default="0"> to avoid the "Element BUREAUID is undefined in URL." error.
0
 
Eric BourlandAuthor Commented:
Got it!
0
All Courses

From novice to tech pro — start learning today.