title: Fill textbox based on dropdown value mvc php
body: <p>So i have a dropdown list that is filled with data that is pulled from my database. Im stuck with populating the textbox based on the value thats selected from the dropdown box.</p>
  
  <p>My model currently looks like this:</p>
  
  <pre><code>&lt;?php
  require_once('../Config/config.php');
  
  class AppCalc 
  {
      public $dbconn;
  
      public function __construct()
      {
          $database = new Database();
          $db = $database-&gt;dbConnection();
          $this-&gt;dbconn = $db;
      }
  
      public function fillDropdown () {
      $stmt = $this-&gt;dbconn-&gt;prepare("SELECT AppID, Appliance, PowerConsumption FROM appliances ORDER BY Appliance");
      $stmt-&gt;execute();
      return $stmt-&gt;fetchAll(PDO::FETCH_ASSOC);
  }
  }
  
  ?&gt;
  </code></pre>
  
  <p>My Controller:</p>
  
  <pre><code>&lt;?php
  require_once('../Model/applianceModel.php');
  require_once('../Tool/DrawTool.php'); 
  
  $newCalc = new AppCalc();
  // instantiate drawing tool
  $draw = new DrawTool();
  // parse (render) appliance view
  $renderedView = $draw-&gt;render('../View/applianceCalculator.php', array(
      'appliances' =&gt; $newCalc-&gt;fillDropdown()
  ));
  
  echo $renderedView;
  ?&gt;
  </code></pre>
  
  <p>and my View:</p>
  
  <pre><code> $(document).ready(function() {
      $('#appliance').on('change', function () {
          $('#powerCon').val($(this[this.selectedIndex]).attr('data-powerConsumption'));
      });
  })
  &lt;/script&gt;
  
      &lt;div id="mainBody"&gt;
          &lt;h2 &gt;Energy Consumption and Cost of household appliances&lt;/h2&gt;
  
          &lt;div id="appForm"&gt;
              &lt;form id="applianceCalc"&gt;
                  Typical Appliance: 
                  &lt;select id="appliance" name="appliance"&gt;
                      &lt;option value="" disabled selected&gt;Select your option&lt;/option&gt; 
                      &lt;?php
                      foreach ($appliances as $appliance):
                          ?&gt;
                      &lt;option value="&lt;?php echo $appliance['AppID']; ?&gt;" data-powerConsumption="&lt;?php echo $appliance['PowerConsumption']; ?&gt;"&gt;
                          &lt;?php echo $appliance['Appliance']; ?&gt;
                      &lt;/option&gt;
                      &lt;?php
                      endforeach;
                      ?&gt;
                  &lt;/select&gt;
                  &lt;br/&gt;
  
                  Power Consumption:
                  &lt;input type="text" id="powerCon" required/&gt;
                  &lt;br/&gt;
  
  
                  Hours of use per day:
                  &lt;input type="text" name="hoursPerDay" required/&gt;
                  &lt;br/&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>And here is the table im working with:</p>
  
  <pre><code>CREATE TABLE IF NOT EXISTS `appliances` (
    `AppId` int(11) NOT NULL AUTO_INCREMENT,
    `Appliance` varchar(50) NOT NULL,
    `PowerConsumption` int(8) NOT NULL,
    PRIMARY KEY (`AppId`)
  ) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;
  
  
  
  INSERT INTO `appliances` (`AppId`, `Appliance`, `PowerConsumption`) VALUES
  (1, 'Hairdryer', 1251),
  (2, 'Microwave', 6241);
  </code></pre>
  
  <p>So the code works fine in terms of populating the dropdown with the values from the database. However im stuck on changing the value for the textbox. For example if i was to select "Hairdryer" from the dropdown then the number "1251" should appear in the powerConsumption textbox however for some reason the textbox value isnt changing. It remains blank.</p>