Solved

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

Posted on 2014-11-01
11
151 Views
Last Modified: 2014-11-02
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

0
Comment
Question by:Eric Bourland
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
11 Comments
 
LVL 52

Accepted Solution

by:
_agx_ earned 334 total points
ID: 40417785
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
 
LVL 52

Assisted Solution

by:_agx_
_agx_ earned 334 total points
ID: 40417835
>> 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
 
LVL 3

Author Comment

by:Eric Bourland
ID: 40418163
Makes sense. I am going to work on this today. _agx_, thank you as always. I hope your Sunday is going well.

Eric
0
Raise the IQ of Your IT Alerts

From IT major incidents to manufacturing line slowdowns, every business process generates insights that need to reach the people required to take action. You need a platform that integrates with your business tools to create fully enabled DevOps toolchains.

You need xMatters.

 
LVL 3

Author Comment

by:Eric Bourland
ID: 40418419
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
 
LVL 3

Author Closing Comment

by:Eric Bourland
ID: 40418438
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
 
LVL 52

Expert Comment

by:_agx_
ID: 40418446
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
 
LVL 52

Expert Comment

by:_agx_
ID: 40418447
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
 
LVL 52

Expert Comment

by:_agx_
ID: 40418448
I think EE has a bug :)  It let me delete a comment that was part of an accepted answer.
0
 
LVL 3

Author Comment

by:Eric Bourland
ID: 40418617
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
 
LVL 52

Expert Comment

by:_agx_
ID: 40418663
Yep. Don't forget the <cfparam name="URL.bureauID" default="0"> to avoid the "Element BUREAUID is undefined in URL." error.
0
 
LVL 3

Author Comment

by:Eric Bourland
ID: 40418674
Got it!
0

Featured Post

Containers & Docker to Create a Powerful Team

Containers are an incredibly powerful technology that can provide you and/or your engineering team with huge productivity gains. Using containers, you can deploy, back up, replicate, and move apps and their dependencies quickly and easily.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article  is about submitting  form through  ColdFusion.Ajax.submitForm to the action page and send a response back in JSON format which later can be decoded using ColdFusion.JSON.decode. By this way you can avoid the usual page refresh for subm…
I spent nearly three days trying to figure out how incorporate OAuth in Coldfusion for the Eventful API. Hopefully, this article will allow Coldfusion Programmers to buzz through the API when they need to. Basically, what this script does is authori…
There's a multitude of different network monitoring solutions out there, and you're probably wondering what makes NetCrunch so special. It's completely agentless, but does let you create an agent, if you desire. It offers powerful scalability …
Monitoring a network: how to monitor network services and why? Michael Kulchisky, MCSE, MCSA, MCP, VTSP, VSP, CCSP outlines the philosophy behind service monitoring and why a handshake validation is critical in network monitoring. Software utilized …

691 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question