Solved

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

Posted on 2010-09-08
8
460 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
  • 5
  • 3
8 Comments
 
LVL 51

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 51

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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 

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 51

Accepted Solution

by:
HainKurt earned 500 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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
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…

821 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