title: MySQL Query Within JavaScript
body: <p>I am working on a form whereby JavaScript is used to add another line item.  The purpose is to add line items to an invoice.  I have successfully got this to work ok when using text boxes in my form, but am stuck on how to get this to work with a dropdown box that makes a call to mysql to get the dropdown box data.</p>
  
  <p>Here is what I have.</p>
  
  <pre><code> &lt;?php
       include $_SERVER['DOCUMENT_ROOT']."/connect.php";
       include $_SERVER['DOCUMENT_ROOT']."/includes/header.php";
   ?&gt;
  
   &lt;script type="text/javascript"&gt;
       var counter = 1;
       function addInput(divName){
            var newdiv = document.createElement('div');
            newdiv.innerHTML = "Entry " + (counter + 1) + " &lt;br&gt;&lt;select name='myInputs[]'&gt;&lt;?php $result = mysql_query("SELECT * FROM salesitem"); while($row = mysql_fetch_array($result)) { echo "&lt;option value=\"".$row['name']."\"&gt;".$row['name']."&lt;/option&gt;";} ?&gt;&lt;/select&gt;";
            document.getElementById(divName).appendChild(newdiv);
       }
   &lt;/script&gt;
  
   &lt;form method="POST"&gt;
       &lt;div id="dynamicInput"&gt;
            Entry 1&lt;br&gt;&lt;select name="myInputs[]"&gt;&lt;?php $result = mysql_query("SELECT * FROM salesitem"); while($row = mysql_fetch_array($result)) { echo "&lt;option value=\"".$row['name']."\"&gt;".$row['name']."&lt;/option&gt;";} ?&gt;&lt;/select&gt;
       &lt;/div&gt;
       &lt;input type="button" value="Add another text input" onClick="addInput('dynamicInput');"&gt;
   &lt;/form&gt;
  </code></pre>
  
  <p>So here is some info on what is going on.  Right now, the JavaScript code above shows the MySQL query in it.  This kills the add line item functionality.  If I simply remove the query but leave the other php in, the add line item begins to work again, but of course there is no data in the drop down.</p>
  
  <p>In the form itself, it gets the first line item from the database without using javascript and this is working ok.</p>
  
  <p>I feel like I am getting close, but don't know where to go from here.</p>
  
  <p>Thanks in advance.</p>
  
  <p>EDIT:
  Thanks to Nick, I got this working.  Here is the code.</p>
  
  <pre><code> &lt;?php
   include $_SERVER['DOCUMENT_ROOT']."/connect.php";
   include $_SERVER['DOCUMENT_ROOT']."/includes/header.php";
   ?&gt;
  
   &lt;script type="text/javascript"&gt;
   var counter = 1;
   function addInput(div){
      xmlhttp=new XMLHttpRequest();
      xmlhttp.onreadystatechange = function() {
       if (xmlhttp.readyState == 4 &amp;&amp; xmlhttp.status == 200){
        var newdiv = document.createElement('div');
        newdiv.innerHTML = "Entry " + (++counter) + " &lt;br&gt;&lt;select name='myInputs[]'&gt;" + xmlhttp.responseText + "&lt;/select&gt;";
       }
        document.getElementById(div).appendChild(newdiv);
     }
  
   xmlhttp.open("GET", "update_text.php", false);
   xmlhttp.send();
   }
   &lt;/script&gt;
  
   &lt;form method="POST"&gt;
   &lt;div id="dynamicInput"&gt;
        Entry 1&lt;br&gt;&lt;select name="myInputs[]"&gt;&lt;?php $result = mysql_query("SELECT * FROM salesitem"); while($row = mysql_fetch_array($result)) { echo "&lt;option value=\"".$row['name']."\"&gt;".$row['name']."&lt;/option&gt;";} ?&gt;&lt;/select&gt;
   &lt;/div&gt;
   &lt;input type="button" value="Add" onClick="addInput('dynamicInput');"&gt;
   &lt;/form&gt;
  </code></pre>
  
  <p>Then the update_text.php</p>
  
  <pre><code> &lt;?php
   include $_SERVER['DOCUMENT_ROOT']."/connect.php";
   $result = mysql_query("SELECT * FROM salesitem");
   while($row = mysql_fetch_array($result)) {
   echo "&lt;option value=\"".$row['name']."\"&gt;".$row['name']."&lt;/option&gt;";
   }
   ?&gt;
  </code></pre>
  
  <p>And here is my php post into the database which is not working for the javascript add line item, only for the original entry that is created from the form.  (I have other fields besides the dropdown).</p>
  
  <pre><code> &lt;?php
  
   include $_SERVER['DOCUMENT_ROOT']."/connect.php";
  
   $company = mysql_real_escape_string($_POST['company']);
  
   foreach($_POST['item'] as $i =&gt; $item)
   {
     $item = mysql_real_escape_string($item);
   $quantity = mysql_real_escape_string($_POST['quantity'][$i]);
  
   mysql_query("INSERT INTO invoice (company, item, quantity) VALUES ('$company', '".$item."', '".$quantity."') ") or die(mysql_error());
   }
   echo "&lt;br&gt;&lt;font color=\"green\"&gt;&lt;b&gt;Invoice added&lt;/b&gt;&lt;/font&gt;";
  
   ?&gt;
  </code></pre>
  
  <p>Thanks, please let me know if I can clean this up better.</p>