Solved

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

Posted on 2014-11-01
11
147 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Today, I was working on some optimization and spam-stopping techniques when I encountered Ben Nadel's post to reduce spam feature using Math (http://www.bennadel.com/blog/197-How-I-Stop-Spammers-On-My-ColdFusion-Blog.htm). While this method is not o…
This is an updated version of a post made on my blog over 3 years ago. It is unfortunately, still very relevant as we continue to see both SQLi (SQL injection) and XSS (cross site scripting) attacks hitting some of the most recognizable website and …
Along with being a a promotional video for my three-day Annielytics Dashboard Seminor, this Micro Tutorial is an intro to Google Analytics API data.
Although Jacob Bernoulli (1654-1705) has been credited as the creator of "Binomial Distribution Table", Gottfried Leibniz (1646-1716) did his dissertation on the subject in 1666; Leibniz you may recall is the co-inventor of "Calculus" and beat Isaac…

815 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

10 Experts available now in Live!

Get 1:1 Help Now