Solved

Javascript update Iframe

Posted on 2004-04-26
3
913 Views
Last Modified: 2012-05-04
For reference this form is to collect patient demographics and other patient information while a doctor is ordering laboratory tests through our new browser application.

Here's what I'd like to do. The four buttons listed below (General, Chem, Tox, etc) would be listed in the main page with a iframe listed just below it.

When the doctor clicks on any of the buttons, the div layers would populate the iframe with new information. My reason for this is they don't want to scroll pages and pages of information because of course all the other information throughout the form scrolls as well.

So looking for help to have the Dr to click on a button that will change the layer display within the iframe.

Thanks and some of my existing code is listed below.



<!---- Code Listed Below ---->

<script language="JavaScript">
//the next 3 lines are browser detection for user-agent DOMS
ns4 = (document.layers) ? true:false //required for Functions to work
ie4 = (document.all) ? true:false //required for Functions to work
ng5 = (document.getElementById) ? true:false //required for Functions to work

function hideSec() {
if (ng5) document.getElementById('sec1').style.visibility = "hidden"
else if (ns4) document.sec1.visibility = "hide"
else if (ie4) sec1.style.visibility ="hidden"

if (ng5) document.getElementById('sec2').style.visibility = "hidden"
else if (ns4) document.sec2.visibility = "hide"
else if (ie4) sec2.style.visibility ="hidden"

if (ng5) document.getElementById('sec3').style.visibility = "hidden"
else if (ns4) document.sec3.visibility = "hide"
else if (ie4) sec3.style.visibility ="hidden"

if (ng5) document.getElementById('sec4').style.visibility = "hidden"
else if (ns4) document.sec4.visibility = "hide"
else if (ie4) sec4.style.visibility ="hidden"
}

function showSec(n) {
hideSec();
if (ng5) document.getElementById('sec' + n).style.visibility = "visible";
else if (ns4) document.layers["sec" + n].visibility = "show";
else if (ie4) document.all["sec" + n].style.visibility = "visible";
}

function showAllSec(n) {
if (ng5) document.getElementById('sec' + n).style.visibility = "visible";
else if (ns4) document.layers["sec" + n].visibility = "show";
else if (ie4) document.all["sec" + n].style.visibility = "visible";
}
</script>

<input type="button" value="General" onclick="showSec(1)">
<input type="button" value="Chemistry" onclick="showSec(2)">
<input type="button" value="Toxicology" onclick="showSec(3)">
<input type="button" value="Cytology" onclick="showSec(4)">

<div id="sec1" style="position:absolute; top:115px; left:50px; visibility:hidden;">
  <table width="95%" border="0" cellspacing="1" bgcolor="cccccc">
    <tr bgcolor="ffffff">
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Acetaminophen (Tylenol)">500 Acetaminophen (Tylenol)</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Acetylcholine Receptor Antibody">417 Acetylcholine Receptor Antibody</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Acid Fast Bacillus Culture">126 Acid Fast Bacillus Culture</td>
    </tr>
    <tr bgcolor="ffffff">
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Acid Fast Bacillus Smear">003 Acid Fast Bacillus Smear</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Acid Phosphatase, Prostatic">479 Acid Phosphatase, Prostatic</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Acid Phosphatase, Total">004 Acid Phosphatase, Total</td>
    </tr>
  </table>
</div>

<div id="sec2" style="position:absolute; top:115px; left:50px; visibility:hidden;">
  <table width="95%" border="0" cellspacing="1" bgcolor="cccccc">
    <tr bgcolor="ffffff">
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Basic Metabolic Profile">687 Basic Metabolic Profile</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Beta 2 Microglobulin">032 Beta 2 Microglobulin</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Bilirubin, Body Fluid">050 Bilirubin, Body Fluid</td>
    </tr>
    <tr bgcolor="ffffff">
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Bilirubin, Direct">478 Bilirubin, Direct</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Bilirubin, Total">395 Bilirubin, Total</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Bilirubin, Total and Direct">052 Bilirubin, Total and Direct</td>
    </tr>
  </table>
</div>

<div id="sec3" style="position:absolute; top:115px; left:50px; visibility:hidden;">
  <table width="95%" border="0" cellspacing="1" bgcolor="cccccc">
    <tr bgcolor="ffffff">
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="C-Peptide">512 C-Peptide</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="C-Reactive Protein">111 C-Reactive Protein</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="C1 Esterase Inhibitor">9927 C1 Esterase Inhibitor</td>
    </tr>
    <tr bgcolor="ffffff">
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="C2 Complement">9921 C2 Complement</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="CA 19-9">509 CA 19-9</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Cadmium, Urine 24 Hour">117 Cadmium, Urine 24 Hour</td>
    </tr>
  </table>
</div>

<div id="sec4" style="position:absolute; top:115px; left:50px; visibility:hidden;">
  <table width="95%" border="0" cellspacing="1" bgcolor="cccccc">
    <tr bgcolor="ffffff">
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="D-Dimer">055 D-Dimer</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="D-Dimer, Quantitative">7251 D-Dimer, Quantitative</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Desipramine (Norpramin)">293 Desipramine (Norpramin)</td>
    </tr>
    <tr bgcolor="ffffff">
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="DHEA Sulfate">554 DHEA Sulfate</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="DHEA Unconjugated">9940 DHEA Unconjugated</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Dialysis Profile">699 Dialysis Profile</td>
    </tr>
  </table>
</div>
0
Comment
Question by:campbelc
  • 2
3 Comments
 
LVL 12

Accepted Solution

by:
lil_puffball earned 250 total points
ID: 10924779
Just use

window.frames['framename'].document

instead of

document.


Here is the code incorporated into your code:

-----------------------------------------------------------------
main page
-----------------------------------------------------------------
<script language="JavaScript">
//the next 3 lines are browser detection for user-agent DOMS
ns4 = (document.layers) ? true:false //required for Functions to work
ie4 = (document.all) ? true:false //required for Functions to work
ng5 = (document.getElementById) ? true:false //required for Functions to work

function hideSec() {
  for(var i=1;i<=4;i++){
    if (ng5) window.frames['framename'].document.getElementById('sec'+i).style.visibility = "hidden"
    else if (ns4) window.frames['framename'].document.layers['sec'+i].visibility = "hide"
    else if (ie4) window.frames['framename'].document.all['sec'+i].style.visibility ="hidden"
  }
}

function showSec(n) {
hideSec();
if (ng5) window.frames['framename'].document.getElementById('sec' + n).style.visibility = "visible";
else if (ns4) window.frames['framename'].document.layers["sec" + n].visibility = "show";
else if (ie4) window.frames['framename'].document.all["sec" + n].style.visibility = "visible";
}

function showAllSec(n) {
if (ng5) window.frames['framename'].document.getElementById('sec' + n).style.visibility = "visible";
else if (ns4) window.frames['framename'].document.layers["sec" + n].visibility = "show";
else if (ie4) window.frames['framename'].document.all["sec" + n].style.visibility = "visible";
}
</script>

<input type="button" value="General" onclick="showSec(1)">
<input type="button" value="Chemistry" onclick="showSec(2)">
<input type="button" value="Toxicology" onclick="showSec(3)">
<input type="button" value="Cytology" onclick="showSec(4)">

<p><iframe src=iframe.htm style='width:100%;height:50%;' name=framename></iframe>

-----------------------------------------------------------------
iframe.htm
-----------------------------------------------------------------
<div id="sec1" style="position:absolute; top:115px; left:50px; visibility:hidden;">
  <table width="95%" border="0" cellspacing="1" bgcolor="cccccc">
    <tr bgcolor="ffffff">
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Acetaminophen (Tylenol)">500 Acetaminophen (Tylenol)</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Acetylcholine Receptor Antibody">417 Acetylcholine Receptor Antibody</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Acid Fast Bacillus Culture">126 Acid Fast Bacillus Culture</td>
    </tr>
    <tr bgcolor="ffffff">
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Acid Fast Bacillus Smear">003 Acid Fast Bacillus Smear</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Acid Phosphatase, Prostatic">479 Acid Phosphatase, Prostatic</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Acid Phosphatase, Total">004 Acid Phosphatase, Total</td>
    </tr>
  </table>
</div>

<div id="sec2" style="position:absolute; top:115px; left:50px; visibility:hidden;">
  <table width="95%" border="0" cellspacing="1" bgcolor="cccccc">
    <tr bgcolor="ffffff">
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Basic Metabolic Profile">687 Basic Metabolic Profile</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Beta 2 Microglobulin">032 Beta 2 Microglobulin</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Bilirubin, Body Fluid">050 Bilirubin, Body Fluid</td>
    </tr>
    <tr bgcolor="ffffff">
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Bilirubin, Direct">478 Bilirubin, Direct</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Bilirubin, Total">395 Bilirubin, Total</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Bilirubin, Total and Direct">052 Bilirubin, Total and Direct</td>
    </tr>
  </table>
</div>

<div id="sec3" style="position:absolute; top:115px; left:50px; visibility:hidden;">
  <table width="95%" border="0" cellspacing="1" bgcolor="cccccc">
    <tr bgcolor="ffffff">
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="C-Peptide">512 C-Peptide</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="C-Reactive Protein">111 C-Reactive Protein</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="C1 Esterase Inhibitor">9927 C1 Esterase Inhibitor</td>
    </tr>
    <tr bgcolor="ffffff">
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="C2 Complement">9921 C2 Complement</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="CA 19-9">509 CA 19-9</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Cadmium, Urine 24 Hour">117 Cadmium, Urine 24 Hour</td>
    </tr>
  </table>
</div>

<div id="sec4" style="position:absolute; top:115px; left:50px; visibility:hidden;">
  <table width="95%" border="0" cellspacing="1" bgcolor="cccccc">
    <tr bgcolor="ffffff">
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="D-Dimer">055 D-Dimer</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="D-Dimer, Quantitative">7251 D-Dimer, Quantitative</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Desipramine (Norpramin)">293 Desipramine (Norpramin)</td>
    </tr>
    <tr bgcolor="ffffff">
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="DHEA Sulfate">554 DHEA Sulfate</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="DHEA Unconjugated">9940 DHEA Unconjugated</td>
      <td width="33%" bgcolor="ffffff"><input type="checkbox" name="tests" value="Dialysis Profile">699 Dialysis Profile</td>
    </tr>
  </table>
</div>
0
 
LVL 6

Author Comment

by:campbelc
ID: 10929561
Thanks I'll try it out
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 11111475
You're welcome. Thanks for the points and the A! :)
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
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…

807 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