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!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

help with div's and form fields

Status
Not open for further replies.
cfdeveloper

cfdeveloper

Programmer
Nov 20, 2003
144
GB
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(&quot;superDiv1&quot;).className == &quot;hidden&quot;){
document.getElementById(&quot;superDiv1&quot;).className = &quot;normal&quot;;
document.getElementById(&quot;superDiv&quot;).className = &quot;hidden&quot;;
}
}

</script>

</head>

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

<tr>
<td width=&quot;100%&quot; valign=&quot;top&quot;>
<div id=&quot;superDiv1&quot; style=&quot;position:absolute; z-index:2; top: 50px; left: 5px; border: 1px none #000000;&quot; class=&quot;hidden&quot;>
<table width=&quot;100%&quot; border=&quot;0&quot;>
<tr>
<td align=&quot;left&quot;>
<p><input type=&quot;text&quot; name=&quot;txtField1&quot;></p>
<p><input type=&quot;text&quot; name=&quot;txtField2&quot;></p>
<p><input type=&quot;text&quot; name=&quot;txtField3&quot;></p>
<p><input type=&quot;text&quot; name=&quot;txtField4&quot;></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
 
Sort by date Sort by votes
function pressedGo(){
if (document.getElementById(&quot;superDiv1&quot;).className == &quot;hidden&quot;){
document.getElementById(&quot;superDiv1&quot;).className = &quot;normal&quot;;
document.getElementById(&quot;superDiv&quot;).className = &quot;hidden&quot;;
document.frm.txtField1.value = document.frm.userName.value
document.frm.txtField2.value = document.frm.area.value
}
}

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook (No, I'm not Rick)

fart.gif
 
Upvote 0 Downvote
As far as I know it's not, though someone else may know otherwise. I think you can do something similar to what you're talking about by creating this page through a script. The script could look for the username begin passed to it. If it doesn't get a username it doesn't show div2. If it does get the username, it can show div2 with the appropriate user details. So in effect the page will act as you're wanting, though you may notice it reloading after you submit the username.

Kevin
A+, Network+, MCP
 
Upvote 0 Downvote
Doh - didn't read the question all the way through - if you don't want to call the server, then you need to send all possibilities to the client - which you don't want to do (everyone could see everyone else's info by viewing the source).

Sounds like a server call is in order... Sorry...

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook (No, I'm not Rick)

fart.gif
 
Upvote 0 Downvote
somebody has suggested to use iFrames, do you know if this could be done using iFrames?
 
Upvote 0 Downvote
Yeah, I was going to suggest that, but I don't know the specific code you'd use. I would assume you'd have to change the url of the iframe using javascript, and pass it the username through the url. Then whatever page you put in the iframe would do the query and display the results.

Kevin
A+, Network+, MCP
 
Upvote 0 Downvote
I have absolutely no idea how to use iFrames, don't know who to turn to, can you suggest any sites?
 
Upvote 0 Downvote
finally got it to work, here is my code
Test1.cfm

<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(){
document.getElementById(&quot;superDiv1&quot;).className =&quot;normal&quot;;
document.getElementById(&quot;secondFram&quot;).className =&quot;normal&quot;;
secondFram.location.href='Test2.cfm?ID=' + document.frm.userName.value;
}

</script>
</head>

<body>
<form name=&quot;frm&quot; method=&quot;post&quot;>
<table width=&quot;100%&quot; border=&quot;0&quot;>
<tr>
<td align=&quot;left&quot;>
<table width=&quot;100%&quot; border=&quot;0&quot;>
<tr>
<td align=&quot;left&quot;>
Enter user name <input type=&quot;text&quot; name=&quot;userName&quot;>
or area <input type=&quot;text&quot; name=&quot;area&quot;>
<input type=&quot;button&quot; name=&quot;go&quot; value=&quot;go&quot; onclick=&quot;pressedGo()&quot;>
</td>
</tr>
</table>
</td>
</tr>
<div id=&quot;superDiv1&quot; style=&quot;position:absolute; z-index:2; border: 1px none #000000;&quot; class=&quot;hidden&quot;>
<tr>
<td width=&quot;100%&quot; valign=&quot;top&quot;>
<table width=&quot;100%&quot; border=&quot;0&quot;>
<tr>
<td>
<IFRAME marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=0 scrolling=no id=&quot;secondFram&quot; name=&quot;secondFram&quot; src=&quot;Test2.cfm?ID=1&quot; class=&quot;hidden&quot;></IFRAME>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</form>

</body>
</html>

Test2.cfm

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

<table width=&quot;100%&quot; border=&quot;0&quot;>
<tr>
<td align=&quot;left&quot;>
<cfoutput>
<p><input type=&quot;text&quot; name=&quot;txtField1&quot; value=&quot;#url.id#&quot;></p>
</cfoutput>
</td>
</tr>
</table>

</body>
</html>

This is just to give your an idea.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
740
3esolar
3
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
800
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
211
lmcate
lmcate
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
665
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top