IFrame - emulate tabs with forms and buttons

Hi All,

I was told that you can emulate a tabbed form using iframes but was not supplied an example.  (E.g.  Click on button1 and form1 is displayed in the iframe, click on button2 and form2 is displayed in the iframe - all forms need to be part of the current html file)  I do not understand how to implement this.  I find tons of examples showing how to load .html files into an iframe, but no examples for loading a form into an iframe from the same html page.  Please help!

Thanks,
Todd
teberhardtAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

the_silverlordCommented:
I'm not sure you can use an IFRAME to load a form specifically defined in the HTML (unless you're passing parameters with the SRC to the same page, and dynamically reveal forms depending on the parameter).

You could use hidden page divisions, which contain your forms, and some DHTML/JavaScript to display/hide the relevant forms when a button is clicked.

The following brief code example will work in IE5+:


<div id="divFrmOne" style="position:absolute; top:10; left:10; display: none;">
     <form id="frmOne" name="frmOne">
     Enter your name: <input type="text" size="10" name="my_name" />
     </form>
</div>

<br /><br />
<input type="button" onClick="javascript:document.all['divFrmOne'].style.display = '';" value="Show Form" />
<input type="button" onClick="javascript:document.all['divFrmOne'].style.display = 'none';" value="Hide Form" />
0
jaysolomonCommented:
are you using any server side code? (asp,php,jsp ....)
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
teberhardtAuthor Commented:
Hi all,

Sorry I haven't replied back.  I have been "in transit."

But I have gotten this far:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head><title>iFrames Test</title></head>
<body>


<form name="form1">
<font face="Arial,Helvetica" size="-1">
<input type="button" name="showFrame1" value="Frame 1" onclick="javascript:Show1();return false;">
<input type="button" name="showFrame2" value="Frame 2" onclick="javascript:Show2();return false;">

<table width="100%" cellspacing="0" cellpadding="0" border="0" align="right" cols="1">
<tr >
<td colspan="1">
<iframe id="displayForm1" name="frameOne" height="0" width="0">


</iframe>
<iframe id="displayForm2" name="frameTwo" height="0" width="0">


</iframe>
</td>
</tr>
</table>
</form>


     <SCRIPT LANGUAGE=javascript>
     function Show1()
     {
          document.all[frameOne.name].height=500;
          document.all[frameOne.name].width=500;
          document.all[frameTwo.name].height=0;
          document.all[frameTwo.name].width=0;
     }

     function Show2()
     {
          document.all[frameOne.name].height=0;
          document.all[frameOne.name].width=0;
          document.all[frameTwo.name].height=400;
          document.all[frameTwo.name].width=400;
     }
     </SCRIPT>


</body>
</html>

I used different width and height just to show that it is replacing the frame with the second one.

All I need to know now is how to load the JSP parameter info relevant to each iframe as the respective elements' content.

E.g.  I updated a record on the previous page.  It contains some multi-selects.  I want to show the complete new record on the first iframe (what will be put to the database as the new record) and the added/removed items on the second iframe (what was changed from the original record).  I need to do this in case someone accidentally deselects info that they didn't want to deselect.  This will give them a safety net.  And the requirements call for a tabbed screen.  I was told that I needed to use IFrames to accomplish this.  BTW, I found out that I only need one form as noted above.

Do you know how to load the parameter data passed from a JSP into the iframe?

Thanks,
Todd
0
teberhardtAuthor Commented:
Hi all,

Sorry I haven't replied back.  I have been "in transit."

But I have gotten this far:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head><title>iFrames Test</title></head>
<body>


<form name="form1">
<font face="Arial,Helvetica" size="-1">
<input type="button" name="showFrame1" value="Frame 1" onclick="javascript:Show1();return false;">
<input type="button" name="showFrame2" value="Frame 2" onclick="javascript:Show2();return false;">

<table width="100%" cellspacing="0" cellpadding="0" border="0" align="right" cols="1">
<tr >
<td colspan="1">
<iframe id="displayForm1" name="frameOne" height="0" width="0">


</iframe>
<iframe id="displayForm2" name="frameTwo" height="0" width="0">


</iframe>
</td>
</tr>
</table>
</form>


     <SCRIPT LANGUAGE=javascript>
     function Show1()
     {
          document.all[frameOne.name].height=500;
          document.all[frameOne.name].width=500;
          document.all[frameTwo.name].height=0;
          document.all[frameTwo.name].width=0;
     }

     function Show2()
     {
          document.all[frameOne.name].height=0;
          document.all[frameOne.name].width=0;
          document.all[frameTwo.name].height=400;
          document.all[frameTwo.name].width=400;
     }
     </SCRIPT>


</body>
</html>

I used different width and height just to show that it is replacing the frame with the second one.

All I need to know now is how to load the JSP parameter info relevant to each iframe as the respective elements' content.

E.g.  I updated a record on the previous page.  It contains some multi-selects.  I want to show the complete new record on the first iframe (what will be put to the database as the new record) and the added/removed items on the second iframe (what was changed from the original record).  I need to do this in case someone accidentally deselects info that they didn't want to deselect.  This will give them a safety net.  And the requirements call for a tabbed screen.  I was told that I needed to use IFrames to accomplish this.  BTW, I found out that I only need one form as noted above.

Do you know how to load the parameter data passed from a JSP into the iframe?

Thanks,
Todd
0
teberhardtAuthor Commented:
This worked great!  Sorry it took me so long to respond.

Thanks!
Todd
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.