• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 923
  • Last Modified:

Javascript update Iframe

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
campbelc
Asked:
campbelc
  • 2
1 Solution
 
lil_puffballCommented:
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
 
campbelcAuthor Commented:
Thanks I'll try it out
0
 
lil_puffballCommented:
You're welcome. Thanks for the points and the A! :)
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now