Fill textbox based on dropdown value mvc php

Question

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.

My model currently looks like this:

<?php
require_once('../Config/config.php');

class AppCalc 
{
    public $dbconn;

    public function __construct()
    {
        $database = new Database();
        $db = $database->dbConnection();
        $this->dbconn = $db;
    }

    public function fillDropdown () {
    $stmt = $this->dbconn->prepare("SELECT AppID, Appliance, PowerConsumption FROM appliances ORDER BY Appliance");
    $stmt->execute();
    return $stmt->fetchAll(PDO::FETCH_ASSOC);
}
}

?>

My Controller:

<?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->render('../View/applianceCalculator.php', array(
    'appliances' => $newCalc->fillDropdown()
));

echo $renderedView;
?>

and my View:

 $(document).ready(function() {
    $('#appliance').on('change', function () {
        $('#powerCon').val($(this[this.selectedIndex]).attr('data-powerConsumption'));
    });
})
</script>

    <div id="mainBody">
        <h2 >Energy Consumption and Cost of household appliances</h2>

        <div id="appForm">
            <form id="applianceCalc">
                Typical Appliance: 
                <select id="appliance" name="appliance">
                    <option value="" disabled selected>Select your option</option> 
                    <?php
                    foreach ($appliances as $appliance):
                        ?>
                    <option value="<?php echo $appliance['AppID']; ?>" data-powerConsumption="<?php echo $appliance['PowerConsumption']; ?>">
                        <?php echo $appliance['Appliance']; ?>
                    </option>
                    <?php
                    endforeach;
                    ?>
                </select>
                <br/>

                Power Consumption:
                <input type="text" id="powerCon" required/>
                <br/>


                Hours of use per day:
                <input type="text" name="hoursPerDay" required/>
                <br/>
    </form>

And here is the table im working with:

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);

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.

If you are copying the value from the drop down to another form element on the page, your issue will not be in your PHP or MySQL. You'll need javascript to accomplish this.So what value specifically from your <option value="foo">bar</option> do you need to copy, and to what element does it need to go? — Davis
– Davis, Commented Feb 26, 2016 at 20:47
use Ajax to get the value from the database or use javascript to update the textbox with the selected option. — Ravinder Reddy
– Ravinder Reddy, Commented Feb 26, 2016 at 20:48
I dont want to copy a value from my dropdown. I want the powerConsumption of the selected item to be displayed in the PowerConsumption textbox. — Spud91
– Spud91, Commented Feb 26, 2016 at 20:48

Davis · Accepted Answer · 2016-02-29 05:15:16Z

1

Ah, okay, if you want the powerConsumption of the selected item displayed in another area (does it need to be a textbox, if it's not editable?), you could do something like this (which requires jQuery):

<script>
$(document).ready(function() {
    $('#foo').on('change', function () {
        $('#bar').val($(this[this.selectedIndex]).attr('data-powerConsumption'));
    });
})
</script>

<select id="foo" name="foo">
  <option value="">select appliance</option>
  <option value="1" data-powerConsumption="100 amp">appliance1</option>
  <option value="2" data-powerConsumption="200 amp">appliance2</option>
</select>

<input type="text" id="bar" value="" />

Here's a working example.

To answer your question, you'll just need to get it from the database and add it to the <option> in your loop, like so:

1] Change your AppCalc->fillDropdown() function to select the column from your table:

public function fillDropdown () {
    $stmt = $this->dbconn->prepare("SELECT AppID, Appliance, PowerConsumption FROM appliances");
    $stmt->execute();
    return $stmt->fetchAll(PDO::FETCH_ASSOC);
}

2] Change where you generate your <option>s:

<?php
    foreach ($appliances as $appliance):
?>
    <option value="<?php echo $appliance['AppID']; ?>" data-powerConsumption="<?php echo $appliance['PowerConsumption']; ?>">
        <?php echo $appliance['Appliance']; ?>
    </option>
<?php
    endforeach;
?>

3] Make sure to include the jQuery library; the easiest way to do this is to use the jQuery CDN. Include this in your <head> (the version of jQuery is up to you but this should suffice):

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

That should do it for you. Then the example provided will do as you require.

edited Feb 29, 2016 at 5:15

answered Feb 26, 2016 at 21:04

Davis

8564 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Spud91 Over a year ago

Thanks for the reply. However the powerConsumption is stored in the database and i want to have those values appear in the textbox

Davis Over a year ago

The javascript will require jQuery to run. Are you including the jQuery library on your page? See my edit for the easiest way to do so if you had questions about doing so.

Spud91 Over a year ago

Ah i knew i forgot something simple! Thanks! Works fine.

Collectives™ on Stack Overflow

Fill textbox based on dropdown value mvc php

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related