title: populate drop down lists with data from mysql database in javascript
body: <p>I'm creating a form and it asks candidates to post info about their previous education history - here are the screenshots of the form and the code attached to them!</p>
  
  <p>[IMG]<a href="http://i58.tinypic.com/ege104.png[/IMG]" rel="nofollow">http://i58.tinypic.com/ege104.png[/IMG]</a></p>
  
  <p>[IMG]<a href="http://i59.tinypic.com/fxuf5w.png[/IMG]" rel="nofollow">http://i59.tinypic.com/fxuf5w.png[/IMG]</a></p>
  
  <p>Here's my javascript code:</p>
  
  <pre><code>&lt;script&gt;
  function removeFields1(){
  //var container1 = document.getElementById("container1");
  //container1.removeChild(input);
  
  
  }
      function addFields1(){
          var container = document.getElementById("container1");
  
          var option = document.createElement("select"); //? how do I fix this up
  
  
          //option.text = "Kiwi";
          //container.add(option);
          container.appendChild(option);//? how do I fix this up
  
  
          container.appendChild(document.createTextNode("Address: "));//Address form
  
          var input = document.createElement("input");
          input.type = "text";
          input.id = "instaddress";
          input.name = "instaddress";
          input.size = 20;
          input.maxlenth = 20;
          container.appendChild(input);
  
          container.appendChild(document.createTextNode("From: "));   // which year the person started        
          var from = document.createElement("input");                 // studying in that institution
          from.type = "text";
          from.id = "from";
          from.name = "from";
          from.size = 4;
          from.maxlenth = 4;
          container.appendChild(from);
  
          container.appendChild(document.createTextNode("To: "));     // which year the person finished 
          var to = document.createElement("input");                   // studying in that institution
          to.type = "text";
          to.id = "to";
          to.name = "to";
          to.size = 4;
          to.maxlenth = 4;
          container.appendChild(to);
  
          container.appendChild(document.createTextNode(" Did You Graduate?: Yes"));    // radio buttons whether someone graduated or not          
  
          var grad = document.createElement("input");
          grad.type = "radio";
          grad.id = "graduate";
          grad.name = "graduate";
          grad.value = "yes"; //yes value for radio button
          container.appendChild(grad);
  
          container.appendChild(document.createTextNode(" No "));
          var grad1 = document.createElement("input");
          grad1.type = "radio";
          grad1.id = "graduate";
          grad.value = "no"; //no value for radio button
          container.appendChild(grad1);
  
          container.appendChild(document.createTextNode(" Certificate: "));
  
          var certificate = document.createElement("input");
          certificate.type = "text";
          certificate.id = "certificate";
          certificate.name = "certificate";
          input.size = 25;
          input.maxlenth = 25;
          container.appendChild(certificate);
  
          var addInstitution = document.getElementById(" Add");
          var removeInstitution = document.getElementById("Remove");
       //  container.removeChild(addInstitution);
  
          //create and insert input/text
  
          //create and insert button
          addInstitution = document.createElement("a");
          addInstitution.id="Add"
          addInstitution.href="#";
          addInstitution.text="Add";
          addInstitution.onclick=function(){addFields1();};
  
          removeInstitution = document.createElement("a");
          removeInstitution.id="Remove"
          removeInstitution.href="#";
          removeInstitution.text=" Remove";
          container.appendChild(addInstitution);
          container.appendChild(removeInstitution);
          //removeInstitution.onclick=function(){removeFields1();};
          //
          container.appendChild(document.createElement("br"));
  
      }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Here are the form fields as well: </p>
  
  <pre><code>    &lt;body&gt;
          &lt;form&gt;
  
              &lt;div id="container1"&gt;
          &lt;select name="institution" id="institution"&gt;
  &lt;option &lt;?php if(isset($_POST['institution'])) { echo $_POST['institution']; } ?&gt;&gt;Select Institution&lt;/option&gt;
  &lt;?php
  $sql1a = "SELECT * FROM institution ORDER BY institution asc";
  $smt1a = $dbs-&gt;prepare($sql1a);
  $smt1a -&gt; execute();
  while($row1a=$smt1a-&gt;fetch(PDO::FETCH_ASSOC))
  {
  if($row1a['institution']==$_GET['id3'])
  echo("&lt;option selected value=$row1a[institution]&gt;$row1a[institution]&lt;/option&gt;");
  else
  echo("&lt;option value=$row1a[institution]&gt;$row1a[institution]&lt;/option&gt;");
  }
  ?&gt;
  &lt;/select&gt;
  Address: &lt;input size="20" type="text" id="instaddress" name="instaddress" maxlength="20" size="20"&gt; From:&lt;input type="text" id="from" name="from" size="4" &gt; To: &lt;input type="text" id="to" name="to" size="4"&gt;
  Did You Graduate?: Yes&lt;input type="radio" onclick="checkRadio()" id="graduate" name="graduate" value="yes"&gt; No
  &lt;input type="radio" onclick="checkRadio()" id="graduate" name="graduate" value="no"&gt; Certificate: &lt;input size="20" type="text" id="certificate" name="certificate" maxlength="25" size="25"&gt;
  
                 &lt;a href="#" id="Add" onclick="addFields1()"&gt;Add &lt;/a&gt;&lt;br&gt;
              &lt;/div&gt;
  
          &lt;/form&gt;
      &lt;/body&gt;
  </code></pre>
  
  <p>How can I create a drop-down select menu for the Javascript section when I click <code>addFields1()</code>?</p>
  
  <p>The PHP code for the drop down menu is down here below-the menu is populated with data from a MySQL database. What will be the correct</p>
  
  <pre><code> &lt;option &lt;?php if(isset($_POST['institution'])) { echo $_POST['institution']; } ?&gt;&gt;Select Institution&lt;/option&gt;
  &lt;?php
  $sql1a = "SELECT * FROM institution ORDER BY institution asc";
  $smt1a = $dbs-&gt;prepare($sql1a);
  $smt1a -&gt; execute();
  while($row1a=$smt1a-&gt;fetch(PDO::FETCH_ASSOC))
  {
  if($row1a['institution']==$_GET['id3'])
  echo("&lt;option selected value=$row1a[institution]&gt;$row1a[institution]&lt;/option&gt;");
  else
  echo("&lt;option value=$row1a[institution]&gt;$row1a[institution]&lt;/option&gt;");
  }
  ?&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>Can any of you guys help me out with fixing up the Javascript code?</p>
  
  <p>Here's the snippet of code that needs to be rectified so that I can use Javascript functions to drop down the menu list every time that the "Add" link is pressed:</p>
  
  <pre><code> var option = document.createElement("select"); //? how do I fix this up
  
   var option = document.createElement("select"); //? how do I fix this up
   //option.text = "Kiwi";
   //container.add(option);
   container.appendChild(option);//? how do I fix this up
  </code></pre>