?
Solved

IFrame - emulate tabs with forms and buttons

Posted on 2003-03-18
5
Medium Priority
?
328 Views
Last Modified: 2010-04-09
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
0
Comment
Question by:teberhardt
[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
  • 3
5 Comments
 

Expert Comment

by:the_silverlord
ID: 8159207
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
 
LVL 16

Accepted Solution

by:
jaysolomon earned 1000 total points
ID: 8159702
are you using any server side code? (asp,php,jsp ....)
0
 

Author Comment

by:teberhardt
ID: 8169860
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
 

Author Comment

by:teberhardt
ID: 8169906
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
 

Author Comment

by:teberhardt
ID: 8212692
This worked great!  Sorry it took me so long to respond.

Thanks!
Todd
0

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
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…

777 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