title: multiple javascript onchange events, same script fetching different mysql results
body: <p>I have a javascript that is executed with the onchange event.</p>
  
  <pre><code>onchange="showUser(1, this.value)"
  </code></pre>
  
  <p>The Javascript calls a php page which executes a mysql query and displays the results on the current page.</p>
  
  <p>The javascript works perfectly however I want to duplicate the javascript to run a different query and display the results on the existing page.</p>
  
  <p>I have a table for orders, when I insert an order in the first column, I want the onchange even to trigger two scripts, one to pull and display product details in the second column and the other to pull and show the selling units in the third column.</p>
  
  <p><strong>my javascript is:</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt; 
    function showWhse(userNumber, str) 
    { 
      if (str=="") 
      { 
        document.getElementById("whse" + userNumber).innerHTML=""; 
        return; 
      }   
      if (window.XMLHttpRequest) 
      {// code for IE7+, Firefox, Chrome, Opera, Safari 
        xmlhttp=new XMLHttpRequest(); 
      } 
  
      xmlhttp.onreadystatechange=function() 
      { 
        if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200) 
        { 
          document.getElementById("whse" + userNumber).innerHTML=xmlhttp.responseText; 
        } 
      } 
      xmlhttp.open("GET","getdata1.php?q="+str,true); 
      xmlhttp.send(); 
    }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>the complete PHP Page is:</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Sales Portal&lt;/title&gt;
  &lt;script type="text/javascript"&gt; 
    function showUser(userNumber, str) 
    { 
      if (str=="") 
      { 
        document.getElementById("txtHint" + userNumber).innerHTML=""; 
        return; 
      }   
      if (window.XMLHttpRequest) 
      {// code for IE7+, Firefox, Chrome, Opera, Safari 
        xmlhttp=new XMLHttpRequest(); 
      } 
  
      xmlhttp.onreadystatechange=function() 
      { 
        if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200) 
        { 
          document.getElementById("txtHint" + userNumber).innerHTML=xmlhttp.responseText; 
        } 
      } 
      xmlhttp.open("GET","getdata1.php?q="+str,true); 
      xmlhttp.send(); 
    }
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body topmargin=0&gt;
  
  &lt;form name="orderform" id="orderform" action="newsale.php" method="post"&gt;
  
  &lt;table border=1&gt;    
  
  &lt;tr&gt;
  &lt;td&gt;Product Code&lt;/td&gt;
  &lt;td&gt;Description&lt;/td&gt;
  &lt;td&gt;Warehouse&lt;/td&gt;
  &lt;td&gt;Selling Units&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr id="r1"&gt;  
      &lt;td width=100&gt;
          &lt;input size=10  type=number id=sku1 name=sku1 onchange="showUser(1, this.value)"&gt;
      &lt;/td&gt;
      &lt;td width=280&gt;
          &lt;div align="left" id="txtHint1"&gt;&amp;nbsp;&lt;/div&gt;
      &lt;/td&gt;
      &lt;td width=100&gt;
          &lt;div align="left" id="whse1"&gt;&amp;nbsp;&lt;/div&gt;
      &lt;/td&gt;
      &lt;td width=100&gt;
          &lt;div align="left" id="su1"&gt;&amp;nbsp;&lt;/div&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr id="r2"&gt;  
      &lt;td&gt;
          &lt;input size=10  type=number id=sku2 name=sku2 onchange="showUser(2, this.value)"&gt;
      &lt;/td&gt;
      &lt;td&gt;
          &lt;div align="left" id="txtHint2"&gt;&amp;nbsp;&lt;/div&gt;
      &lt;/td&gt;
      &lt;td&gt;
          &lt;div align="left" id="whse2"&gt;&amp;nbsp;&lt;/div&gt;
      &lt;/td&gt;
      &lt;td width=100&gt;
          &lt;div align="left" id="su2"&gt;&amp;nbsp;&lt;/div&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr id="r3"&gt;  
      &lt;td&gt;
          &lt;input size=10  type=number id=sku3 name=sku3 onchange="showUser(3, this.value)"&gt;
      &lt;/td&gt;
      &lt;td&gt;
          &lt;div align="left" id="txtHint3"&gt;&amp;nbsp;&lt;/div&gt;
      &lt;/td&gt;
      &lt;td&gt;
          &lt;div align="left" id="whse3"&gt;&amp;nbsp;&lt;/div&gt;
      &lt;/td&gt;
      &lt;td width=100&gt;
          &lt;div align="left" id="su3"&gt;&amp;nbsp;&lt;/div&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr id="r4"&gt;  
      &lt;td&gt;
          &lt;input size=10  type=number id=sku4 name=sku4 onchange="showUser(4, this.value)"&gt;
      &lt;/td&gt;
      &lt;td&gt;
          &lt;div align="left" id="txtHint4"&gt;&amp;nbsp;&lt;/div&gt;
      &lt;/td&gt;
      &lt;td&gt;
          &lt;div align="left" id="whse4"&gt;&amp;nbsp;&lt;/div&gt;
      &lt;/td&gt;
      &lt;td width=100&gt;
          &lt;div align="left" id="su4"&gt;&amp;nbsp;&lt;/div&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/form&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>and the php file that executes the mysql query is:</strong></p>
  
  <pre><code>&lt;?php
   $q=$_GET["q"];
  
  $con = mysql_connect('localhost', 'unilekxy_UL', 'Unilever2011');
   if (!$con)
     {
     die('Could not connect: ' . mysql_error());
     }
  
  mysql_select_db("unilekxy_unilever", $con);
  
  
  $sql="SELECT Category, Description,SellingUnits,Grouping,CasesPerPallet,ShrinksPerPallet FROM skudata WHERE packcode = '".$q."'";
  $result = mysql_query($sql);
  $rows=mysql_num_rows($result);
  
  if($rows==0){echo "&lt;font color=red&gt;&lt;b&gt;NOT A VALID PRODUCT CODE&lt;/b&gt;&lt;/font&gt;";} else {
  while($row = mysql_fetch_array($result))
     {
     echo "&lt;font color=red&gt;".$row['Description']."&lt;/font&gt;, ";
     if($row['SellingUnits']=="CS"){echo "&lt;font color=red&gt;".$row['CasesPerPallet']."&lt;/font&gt; ";} elseif($row['SellingUnits']=="SHR") {echo "&lt;font color=red&gt;".$row['ShrinksPerPallet']."&lt;/font&gt; ";}
     }}
  
  mysql_close($con);
   ?&gt; 
  </code></pre>
  
  <p>ideally I can use this script to fetch and display the product details, selling units and warehouse information once the user inputs the product code, as per below image:
  <img src="https://i.stack.imgur.com/ARuWD.png" alt="enter image description here"></p>
  
  <p>How can I edit or duplicate the javascript in order for 1 onchange event to action this? I find that if I duplicate the entire sript, only the last instance is executed, I assume because the variables being used are the same with the unchanged script?</p>
  
  <p>Thanks in advance for the help,
  Ryan</p>
  
  <p><strong>ADDITION</strong> </p>
  
  <p>I have made the changes to the javascript as below:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt; 
    function showUser(userNumber, str) 
    { 
      if (str=="") 
      { 
        document.getElementById("txtHint" + userNumber).innerHTML=""; 
        return; 
      }   
      if (window.XMLHttpRequest) 
      {// code for IE7+, Firefox, Chrome, Opera, Safari 
        xmlhttp=new XMLHttpRequest(); 
      } 
  
      xmlhttp.onreadystatechange=function() 
      { 
        if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200) 
        { 
          document.getElementById("txtHint" + userNumber).innerHTML=xmlhttp.responseText; 
        } 
      } 
      xmlhttp.open("GET","getdata1.php?q="+str,true); 
      xmlhttp.send(); 
  
  var responseText = xmlhttp.responseText; 
  var description = responseText.substring(13, responseText.indexOf(",Warehouse:")); 
  var warehouse = responseText.substring(responseText.indexOf(",Warehouse:")+11, responseText.indexOf(",SellingUnits:")); 
  var sellingUnits = responseText.substring(responseText.indexOf(",SellingUnits:")+14); 
  
  document.getElementById("whse" + userNumber).innerHTML = warehouse; 
  document.getElementById("txtHint" + userNumber).innerHTML = description; 
  document.getElementById("su" + userNumber).innerHTML = sellingUnits;
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>How do I call these values to display in seperate columns? warehouse, description and sellingunits?</p>
  
  <p>I presume I need to call these values from within my table html, how do I do this?</p>
  
  <p>Thanks again, Ryan</p>