Solved

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

Posted on 2014-11-01
11
143 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
  • 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
 
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
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

The technique is by far very Simple! How we can export the ColdFusion query results to DOC file?  Well before writing this I researched a lot in Internet but did not found a good Answer anyways!  So i thought now i should share my small snippet w…
Hi, Even though I have created this Tutorial on My personal Blog, Some people might not able to find my website, So here i am posting it again Today, from the topic it is very clear that i will be showing you here the very basic usage of how we …
This video gives you a great overview about bandwidth monitoring with SNMP and WMI with our network monitoring solution PRTG Network Monitor (https://www.paessler.com/prtg). If you're looking for how to monitor bandwidth using netflow or packet s…
This video demonstrates how to create an example email signature rule for a department in a company using CodeTwo Exchange Rules. The signature will be inserted beneath users' latest emails in conversations and will be displayed in users' Sent Items…

708 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now