Getting two drop down menus to display data in the same iframe

Question

I have two drop down menus, each pulling data from queries that are displayed in an iframe. The problem is that clicking on both menus results in 2 iframes being created and the data being displayed in both. How can I set this up so that only one iframe is created and is shared by the two menu's?

<!DOCTYPE HTML>
<html lang = "en">
  <head>

<title>Side Bar</title>

 <link rel="stylesheet" type="text/css" href="stylesheet.css">

<style>

div {
    text-align: justify;
    }

.section {
     margin-left: auto;
     margin-right: auto;
     width: 70%;
    }
</style>

</head>

<body>
<nav>
<br>
    <h1>Fixed header</h1>
<br>
    <h2>Subheader</h2>
    <ul>
<br>

    <form>
    <p><b>Our Staff</b>

      <select id="mySelect" onchange="select_change()">
        <option value="">Select one</option>
        <option value="Illustrators">Illustrators</option>
        <option value="TechWriters">Tech Writers</option>
      </select>
    </p>
    </form>

    <div class="center">
    <script>

    var iframeExists = false;

    function select_change() {
      var my_select = document.getElementById("mySelect");
      var my_select_value = my_select.options[my_select.selectedIndex].value;

      var x;
      if (!iframeExists) {
        x = document.createElement("IFRAME");
        x.setAttribute("id", "IF");
        iframeExists = true;
      } else {
        x = document.getElementById("IF");
      }
      if(my_select_value) {
        x.setAttribute("src", "http://www.oldgamer60.com/Project/" +
                              my_select_value + ".php");
        document.body.appendChild(x);    
      }
    }

    </script>

    </div>

    <form>
    <p><b>Our Projects</b>
      <select id="mySelect2" onchange="select_change2()">
        <option value="">Select one</option>
        <option value="CurrentProjects">Current Projects</option>
        <option value="ProjectsInFinalReview">In Final Review</option>
        <option value="CompletedProjects">Completed Projects</option>
      </select>
    </p>
    </form>

    <div class="center">

    <script>
    var iframe2Exists = false;

    function select_change2() {
      var my_select = document.getElementById("mySelect2");
      var my_select_value = my_select.options[my_select.selectedIndex].value;

      var x;
      if (!iframe2Exists) {
        x = document.createElement("IFRAME");
        x.setAttribute("id", "IF2");
        iframe2Exists = true;
      } else {
        x = document.getElementById("IF2");
      }
      if(my_select_value) {
        x.setAttribute("src", "http://www.oldgamer60.com/Project/" +
                              my_select_value + ".php");
        document.body.appendChild(x);    
      }
    }

    </script>
</div>
<br>






</div>
    </ul>
    </nav>

    <div id="content">
        <div id="main">
            <h1>Logistics</h1>
<br>
<h2>Tech Orders</h2>

<div class="section">
<p>YAI has been extensively involved in the writing of technical manuals, provisioning and Modification Work Orders (MWOs) for all type of military aviation and ground systems. YAI logistic services have included development and assessment of logistical requirements, preparation of integrated logistic products and field service support  for military aviation, missile and ground combat systems.</>

<p>YAI's Logistic Capabilities include:</p>

<ul>

<li>Technical Manual Writing</li>

<li>Technical Manual Change Pages</li>

<li>Manual Illustrating</li>

<li>MWO Writing</li>

<li>Tagging of Data for Use in Electronic Manuals</li>

<li>Provisioning</li>

<li>Logistical Analyses and Assessments</li>

</ul>

</div>

        </div>

        <footer>
            ..
        </footer>

    </div>



</body>

</html>

Answer 1

Combine the logic into one method

 function select_change(select) { var ifr = document.getElementById("ifr"); if (!ifr) { ifr = document.createElement("iframe"); ifr.id = "ifr"; document.body.appendChild(ifr); } var val = select.options[select.selectedIndex].value; ifr.setAttribute("src", "http://www.oldgamer60.com/Project/" + val + ".php"); }

 <form> <p><b>Our Projects</b> <select id="mySelect2" onchange="select_change(this)"> <option value="">Select one</option> <option value="CurrentProjects">Current Projects</option> <option value="ProjectsInFinalReview">In Final Review</option> <option value="CompletedProjects">Completed Projects</option> </select> </p> </form> <form> <p><b>Our Projects</b> <select id="mySelect2" onchange="select_change(this)"> <option value="">Select one</option> <option value="CurrentProjects">Current Projects</option> <option value="ProjectsInFinalReview">In Final Review</option> <option value="CompletedProjects">Completed Projects</option> </select> </p> </form>

Getting two drop down menus to display data in the same iframe

Question

1 answers

solution1
0 ACCPTED 2015-11-16 14:18:00

Getting two drop down menus to display data in the same iframe

Question

1 answers

solution1 0 ACCPTED 2015-11-16 14:18:00

solution1
0 ACCPTED 2015-11-16 14:18:00