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?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

_agx_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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
_agx_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
Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ColdFusion Language

From novice to tech pro — start learning today.