help with div's and form fields

cfdeveloper · Nov 21, 2003

Hi Everybody,
I really need a second opinion from someone on using DIV's. My page has a form with two div's, the first div, has two text fields and a button with a onClick event. When the user hits the button, the second div is displayed. Here's my code:

<html>
<head>
<title>DIV Example</title>

<style>
.normal{position:absolute;top:100px;left:100px;display:inline;}
.hidden{position:absolute;top:-200px;left:-200px;display:none;}
</style>

<script>
function pressedGo(){
if (document.getElementById("superDiv1&quot

.className == "hidden&quot

{
document.getElementById("superDiv1&quot

.className = "normal";
document.getElementById("superDiv&quot

.className = "hidden";
}
}

</script>

</head>

<body>
<form name="frm" method="post">
<table width="100%" border="0">
<tr>
<td align="left">
<div id="superDiv" style="position:absolute; z-index:2; top: 50px; left: 5px; border: 1px none #000000;" class="normal">
<table width="100%" border="0">
<tr>
<td align="left">
Enter user name <input type="text" name="userName"> or area 
<input type="text" name="area">
   <input type="button" name="go" value="go" onclick="pressedGo()">
</td>
</tr>
</table>
</div>
</td>
</tr>

<tr>
<td width="100%" valign="top">
<div id="superDiv1" style="position:absolute; z-index:2; top: 50px; left: 5px; border: 1px none #000000;" class="hidden">
<table width="100%" border="0">
<tr>
<td align="left">
<p><input type="text" name="txtField1"></p>
<p><input type="text" name="txtField2"></p>
<p><input type="text" name="txtField3"></p>
<p><input type="text" name="txtField4"></p>
</td></tr></table>
</div>
</td>
</tr>
</table>
</form>

</body>
</html>

The code above is fairly st8forward, I hope. What I want it to actually do is pass the usename form field value from div 1 and pass the value to a query in div 2 and display the user details in the div 2 text fields without
actually submitting the form. Is this possible? Is there any other way at all to do this sort of a thing?

Many Thanks
CF Developer

imstillatwork · Nov 21, 2003

NOPE.

passing the form values will work great, but as soon as you need anything from the server (a query) the form MUST be submited to the server. you might be able to work around that by opening a hidden popup, sendin the data to the server, then putting that data into the original form page, but thats bloated coding in my opinion.

cfdeveloper · Nov 24, 2003

I know its not the best way of doing it, but it seems to me that this is the only option. Can you show me how open a hidden popup window which passes the data to the server and returns the data into the original form page?

imstillatwork · Nov 24, 2003

first genereate your URL for the hidden window with the data in the url, use javascript to open a new window, you can use java script to also move the window off screen, or other ways to make it 'hidden'. that pop up takes the URL data (from the first form) and runs a query, gets results, pass those results into more javascript that past them into the original windows second form, and closes itself (or promts to be closed. 'click here to continue' or something)

But what i dont' get is why is it the only option? make a login page ('div' 1, two fields) send that off to the action page ('div' 2) it looks up the data, and displays it based on form variables from first form. very simple.

got to keep in mind that cold fusion and everything it does is ran on the server BEFORE the client gets the page. After its on the clients browser, it has nothing to do with the server anymore.

jdaniels · Nov 24, 2003

2 ways to do this...

You could use Iframes. You have the first form in a DIv in the parent page, and when you hit the button execute some JS that calls some CF page (with the username as part of the querystring) in the iframe which is inside the second, previously hidden div. I did this for a site and it worked well.

OR

when you hit the button, run a javascript function that does the following: takes the username as a parameter (or refers to it via the appropriate syntax of objects), makes the second div visible and uses 'document.all.secondHiddenLayer.innerHTML = sometextvar;' to write the contents of the hidden div. The code would be something like:

function showLayer() {
document.all.secondHiddenLayer.visibility = 'visible';
document.all.secondHiddenLayer.innerHTML = 'You submitted ' + document.all.username.value;
}
.
.
.
[form]
[input type=text name=username]
[input type=button onclick='showLayer();']
[/form]

notes:
[ should be the left angle bracket, and ] the right / closing one
Also, check out the javascript and dhtml forums (fora?)

HTH

Jon Daniels

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

help with div's and form fields

cfdeveloper

Programmer

imstillatwork

IS-IT--Management

cfdeveloper

Programmer

imstillatwork

IS-IT--Management

jdaniels

Technical User

Similar threads

Part and Inventory Search

Sponsor