Solved

Javascript update Iframe

Posted on 2004-04-26
3
907 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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
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…

747 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now