?
Solved

Show/Hide Div AND pass value of the select box to a query...

Posted on 2010-09-08
8
Medium Priority
?
485 Views
Last Modified: 2012-05-10
In short I want to pass the value of what is selected from this select box

<cfform name="myform" method="post" action="dsp_userAdmin.cfm"> 
<select name="SelectedUserID" onChange="submit();">
    <option value="">Please Select</option>
    <cfloop query="session.qry_getUsers">
    <option value="#id#" <cfif selectedUserID eq id>selected</cfif>>#displayName#</option>
    </cfloop>
</select>
</cfform>  
 

Open in new window


to a div that only appears when something is selected. So I need to change the style to not hidden and I need to use that variable #selectedUserID# in a cfif statement and then query.

<cfdiv id="thisDiv" style="hidden><cfif selectedUserID neq '''><cfinclude template=""></cfif></cfdiv>

Open in new window


I've tried various things with cflayout and it just keeps giving me issues (HOW DO YOU USE CFDEBUG!? <- that's another rant!). Anyway, any and all help would be appreciated. I don't want to refresh this page.... it's got too much other info on it.

Where I can
partial code of form 

<cfform name="myform" method="post" action="dsp_userAdmin.cfm"> 
<select name="SelectedUserID" onChange="submit();">
    <option value="">Please Select</option>
    <cfloop query="session.qry_getUsers">
    <option value="#id#" <cfif selectedUserID eq id>selected</cfif>>#displayName#</option>
    </cfloop>
</select>
</cfform>  
  
<cfdiv id="thisDiv" style="hidden><cfif selectedUserID neq '''><cfinclude template=""></cfif></cfdiv>

Open in new window

0
Comment
Question by:traport
[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
  • 5
  • 3
8 Comments
 
LVL 58

Expert Comment

by:HainKurt
ID: 33627674
implement this
<script>
function showID(v){
var d = document.getElementById("thisDiv");
d.style.display = (v != "") ? "" : "none";
d.innerHTML = v;
}
</script>

<select name="SelectedUserID" onChange="showID(this.value)">
    <option value="">Please Select</option>
    <option value="HK">Hain</option>
    <option value="HainKurt">Kurt</option>
</select>

<div id="thisDiv" style="display:none"></div>

Open in new window

0
 

Author Comment

by:traport
ID: 33627820
Thanks HainKurt.

This works... except how can I do anything with the variable #selectedUserID#. It displays in the div, but I want to use it in a query...

select * from table where id = #selectedUserID#

I need it as a variable if that makes sense.
0
 
LVL 58

Expert Comment

by:HainKurt
ID: 33629229
if you post the form, you will get the selected user with request object

and you get it from cf like this I guess

context.Request.Form["selectedUserID"]
0
Use Filtering Commands to Process Files in Linux

Learn how to manipulate data with the help of various filtering commands such as `cat`, `fmt`, `pr`, and others in Linux.

 

Author Comment

by:traport
ID: 33629625
I just don't know how to put to use what you're suggesting. I'm pretty remedial! :) Thanks for trying.
0
 
LVL 58

Accepted Solution

by:
HainKurt earned 2000 total points
ID: 33629815
post the code where your query is

select * from table where id = #selectedUserID#

you need to modify it like

select * from table where id = context.Request.Form["selectedUserID"]
0
 

Author Comment

by:traport
ID: 33629901
Thank you; I'll give it a shot as soon as I get back in the office!
0
 

Author Comment

by:traport
ID: 33630416
I keep getting errors that "context" is undefined.  Here's what I tried to do with your suggestion:


cfparam name="userID" default="">
<script>
function showID(v){
var d = document.getElementById("thisDiv");
d.style.display = (v != "") ? "" : "none";
d.innerHTML = v;
}
</script>
<form>
<select name="SelectedUserID" onChange="showID(this.value);">
    <option value="">Please Select</option>
    <option value="HK">Hain</option>
    <option value="HainKurt">Kurt</option>
</select>
</form>

<div id="thisDiv" style="display:none"><cfset userID eq context.Request.Form["selectedUserID"]><cfoutput>#userID#</cfoutput></div>

Open in new window

0
 

Author Comment

by:traport
ID: 33632115
I had to go another way entirely with this... I used iframes but I wanted to give you the points for sticking with me. Thanks!


<script>
function showUser() {
	var foodd = document.getElementById("selectedUserID");
	var foovalue = foodd.options[foodd.selectedIndex].value;
	if(!foovalue) return;
	var myframe = document.getElementById("myiframe");
	myframe.src = "dsp_userForm.cfm?selectedUserID="+foovalue;
}
</script>
<cfoutput><br>
<select id="selectedUserID" onChange="showUser()">
   		<option value="">Please Select</option>
            <cfloop query="session.qry_getUsers">
    		<option value="#id#" <cfif selectedUserID eq id>selected</cfif>>#displayName#</option>
  			</cfloop>
</select>
</cfoutput>
<br>

<iframe id="myiframe" src="dsp_userForm.cfm" width="75%" height="100%" marginwidth="0" marginheight="0" frameborder="no" scrolling="yes">

Open in new window

0

Featured Post

Command Line Tips and Tricks

The command line is a powerful tool at the disposal of every Linux user. Although Linux distros come with beautiful user interfaces, it's worthwhile to learn the command line because it allows you to do a number of things that you otherwise cannot do from the GUI.  

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

762 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