title: How to auto fill a form with data from database based on drop menu selection
body: <p>I'm working on a MySQL update form and struggle to make a drop down selectbox that will autofill the rest of the form with data from mysql. Basically its a table that consist of users and their credentials. When updating a second table with this form i want to be able to select the username from a drop menu and let that selection autofill the rest of the credentials before moving on to the rest of the form. </p>
  
  <h3>Here is some of the code for setting up the select and input:</h3>
  
  <pre class="lang-php prettyprint-override"><code>&lt;?php 
  //DB Connect
  ...
  // Get array of users   
  $select_users = "SELECT * FROM users";
  
  if (!mysql_query($select_users)) {
  die('Error: ' . mysql_error());
  } //all good so far
  
  $select_users_result = mysql_query($select_users);
  ?&gt;
  
  &lt;select id="selectbox" name="navn" onchange="populateData(this.value)"&gt;
     &lt;option&gt;USER&lt;/option&gt;
  &lt;?php   
  
  $klubb = array();
  $klasse = array();
  while ($row = mysql_fetch_array($select_users_result, MYSQL_ASSOC)) {
  
   echo "&lt;option value='" . $row['navn'] . "'&gt;". $row['navn'] ."&lt;/option&gt;";
  
  //echoing these vars will output all rows for the column specified...
  $klubb[] = $row['klubb'];   
  $klasse[] = $row['klasse']; 
  
  }
  
  mysql_close();
  
  ?&gt;  
  &lt;/select&gt;
  
  &lt;tr&gt;
      &lt;td&gt;Klubb: &lt;/td&gt;
      &lt;td&gt;&lt;input id="klubb" type="text" name="klubb" class="cred_input" /&gt;
  
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;Klasse: &lt;/td&gt;
      &lt;td&gt;&lt;input id="klasse" type="text" name="klasse" class="cred_input" /&gt; &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <h3>And then some javascript</h3>
  
  <pre class="lang-js prettyprint-override"><code>&lt;script&gt;
  
  function populateData()
          {
              //alert('in populateData');
              y = document.getElementById("selectbox");
           document.getElementById("klasse").value =  [y.selectedIndex];
          document.getElementById("klubb").value = [y.selectedIndex];
  
          }   
  &lt;/script&gt;
  </code></pre>
  
  <p>The result here is a number in the <code>&lt;td&gt;klubb</code> and <code>&lt;td&gt;klasse</code> based on my selection in the drop menu. </p>
  
  <p><strong>How can i connect the arrays with that index number in the javascript so that it will show the actual data from the array ?</strong></p>
  
  <p>I've been seeking an answers for a few days now but can't find anything that answers my question. </p>
  
  <p>Thanks for any help!</p>