PHP: Output data using drop down list

Question

I'm having a hard time figuring this out.

This is my html with drop down list, it's working as it should. But the thing is, I don't have a clue on how to output the Stock data that's in Stock Column of itemprofile table in a way that every time I pick a different product on the drop down list, Stock value should also change accordingly.

<html>
<body>
<form>
<select name="product" />
<?php
$mysqli = new mysqli("localhost", "root", "","bsystem");
$results = $mysqli->query("SELECT * FROM itemprofile");
    if ($results) { 
        while($obj = $results->fetch_object())
        {
            echo '<option value="'.$obj->productname.'">'.$obj->productname.'</option>';
        }
    }
    ?>
</select>

Available Stock: <?php NO CLUE WHAT TO DO HERE?>
</form>
</body>
</html>

The content of my database:

3 columns: id, productname, stock
            1   item1         50
            2   item2         30
            3   item3         10

Hope you guys can help me out figuring this out. Thanks!

Edit: my code so far.

<html>
<head>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
</head>

<body>

<select id="selectItem">
    <option>-- Select item --</option>
    <?php
    $mysqli = new mysqli("localhost", "root", "","bsystem");
    $results = $mysqli->query("SELECT * FROM itemprofile");
    $itemsStock = array(); # create an array where you will keep your stock values for each item
    if ($results) { 
        while($obj = $results->fetch_object()){
            echo '<option value="'.$obj->productname.'">'.$obj->productname.'</option>';
            $itemsStock[$obj->id] = $obj->stock; # fill array with stock values 
        }
    }
    ?>
</select>

Available stock: <div id="stockValue"></div>

<script>

var stockValues = <?php echo json_encode($itemsStock);?>; // transfer array that contains item stock values from php to the javascript array

    $("#selectItem").change(function(){ // on every DropDown change
        var ItemID = $(this).val(); // get selected item id
        console.log(ItemID);
        var ItemStockValue = stockValues[ItemID]; // search stock value in your array of stock values by using ItemID
        $("#stockValue").html(ItemStockValue); // update Available stock for selected item
    });
</script>
</body>
</html>

NO CLUE WHAT TO DO HERE And how we should know what to do? — u_mulder
– u_mulder, Commented Jan 24, 2015 at 14:22
If you want to change one html element according to change of another element - use javascript. Pure JavaScript or Jquery — u_mulder
– u_mulder, Commented Jan 24, 2015 at 14:31
Your code is totally broken! are you getting any syntex error? — Amit Verma
– Amit Verma, Commented Jan 24, 2015 at 14:40

Branimir Đurek · Accepted Answer · 2015-02-05 10:02:36Z

1

You can do it by using jQuery. You have comments in the code so that you can understand the logic of this solution. By this you can also update multiple values on dropdown change. Code may have some syntax errors but this may solve your problem with outputing data on dropdown change.

<select id="selectItem">
    <option>-- Select item --</option>
    <?php
    $mysqli = new mysqli("localhost", "root", "","bsystem");
    $results = $mysqli->query("SELECT * FROM itemprofile");
    $itemsStock = array(); # create an array where you will keep your stock values for each item
    if ($results) { 
        while($obj = $results->fetch_object()){
            echo '<option value="'.$obj->id.'">'.$obj->productname.'</option>'; // THIS LINE CAUSED THE PROBLEM, i echoed productname in value attribute, instead of id
            $itemsStock[$obj->id] = $obj->stock; # fill array with stock values 
        }
    }
    ?>
</select>

Available stock: <div id="stockValue"></div>

<script>

var stockValues = <?php echo json_encode($itemsStock);?>; // transfer array that contains item stock values from php to the javascript array

    $("#selectItem").change(function(){ // on every DropDown change
        var ItemID = $(this).val(); // get selected item id
        var ItemStockValue = stockValues[ItemID]; // search stock value in your array of stock values by using ItemID
        $("#stockValue").html(ItemStockValue); // update Available stock for selected item
    });
</script>

Remember to include jQuery. Hope it will help you :)

edited Feb 5, 2015 at 10:02

answered Jan 24, 2015 at 14:53

Branimir Đurek

6325 silver badges13 bronze badges

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

6 Comments

Mark Te Over a year ago

I can see the logic but I can't get it to work, it actually echos the product list but it does not give me the stock amount every time I items on the dropdown list.

Branimir Đurek Over a year ago

it should work... make sure this javascript code is executed by adding alert inside the "change event" block. If alert doesn't popup on dropdown change it means that you have some javascript syntax error and chech your console log. Also make sure you have included jQuery BEFORE this code..

Mark Te Over a year ago

I tried putting console.log(ItemID); after the declaration of variable itemID to check if I am getting the correct value, it doesnt echo out any value tho. I also got jquery inside the head tag.

Branimir Đurek Over a year ago

Did you try console.log(ItemStockValue)? if you get correct value it means that the problem is in last line of this block and try to console.log(stockValues) just to make sure that array from php is successfully transfered to js.

Mark Te Over a year ago

Yea, the stockValues gives me correct value so it means the array from php was successfully transferred to js, but the ItemStockValue gives me "undefined"

|

Collectives™ on Stack Overflow

PHP: Output data using drop down list

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related