title: Dynamically fill multiple input fields from MySQL depending on the drop list item selected
body: <p>I've searched through the site for this but am coming up empty handed. Here is what I am trying to do:</p>
  
  <ul>
  <li>User selects one of a series of options from a drop list</li>
  <li>Two input fields change to reflect this selection, filling the input boxes with data pulled from my database</li>
  </ul>
  
  <p><em>See the image below for a visual representation of what I mean:</em>
  <a href="https://i.stack.imgur.com/v6pdg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/v6pdg.png" alt="enter image description here"></a></p>
  
  <p>I know that I am going to need JavaScript for this solution, but my JS skills are not so hot (and I think I am having a momentary lapse of brain power today)!</p>
  
  <p>Here's the code that I have so far (don't worry about the outdated PHP):
  </p>
  
  <pre><code>&lt;select name="item" id="item"&gt;
  
  &lt;?php
  while($row = mysql_fetch_array($result)) {
      $item_id = $row['item_id'];
      $item_category = $row['item_category'];
      $item_title = $row['item_title'];
      $item_price = $row['item_price'];
      $item_description = $row['item_description'];
  
      echo "&lt;option value=\"".$item_id."\"&gt;".$item_title."&lt;/option&gt;";
  } 
  ?&gt;
  
  &lt;/select&gt;
  
  &lt;script&gt;
  function update_txt() {
      price = document.getElementById('item').selectedIndex.value;
      document.getElementById('item_details').value = price;
      document.getElementById('item_price').value = price;
  }
  &lt;/script&gt;
  
  &lt;input id="item_details" type="text" class="validate"&gt;
  &lt;input id="item_price" type="text" class="validate" value="$"&gt;
  </code></pre>
  
  <p>Any help is greatly appreciated! Let me know if you need any clarification. :)</p>