Multiple drop down menus returning data in an iframe

Question

I have two drop down menus that use the same iframe to display data from the queries being run. The problem is that the second menu is only returning the data from the first menu. I've tried changing the select id variables but it hsn't made a difference. How can I set this up so that both menus pull the data they're supposed to?

<!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");
    iframeExists = true;
  } else {
    x = document.getElementsByTagName("IFRAME")[0];
  }
  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="mySelect" onchange="select_change()">
    <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 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");
    iframeExists = true;
  } else {
    x = document.getElementsByTagName("IFRAME")[0];
  }
  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

Change the second select_change() to select_change2() , and change the second mySelect id to mySelect2 . Also, you're missing a closing curly brace to end your if in the second select_change().

When you add javascript in a script tag, that code is global. So you made two methods named select_change(). Only one can exist, so it looks like the browser chose to use the first one. The same goes with id. You shouldn't have two elements with the same id on one page.

 <!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", "IF1"); iframeExists = true; document.body.appendChild(x); } else { x = document.getElementById("IF1"); } if(my_select_value) { x.setAttribute("src", "http://www.oldgamer60.com/Project/" + my_select_value + ".php"); } } </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; document.body.appendChild(x); } else { x = document.getElementById("IF2"); } if(my_select_value) { x.setAttribute("src", "http://www.oldgamer60.com/Project/" + my_select_value + ".php"); } } </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>

edit: I updated it to use separate iframes.

Multiple drop down menus returning data in an iframe

Question

1 answers

solution1
0 2015-11-15 06:00:24

Multiple drop down menus returning data in an iframe

Question

1 answers

solution1 0 2015-11-15 06:00:24

solution1
0 2015-11-15 06:00:24