How to get the id of element from php to javascript?

Question

im trying to echo out a variable that is written from php using javascript. Well basically I have a drop down menu and what I am trying to do is echo out the number of stocks of the item selected by the user. Here is what I've got so far.

<select id="selectItem" onchange="stock(this)">
    <?php
     --- connection here ----
    $itemsStock = array();
    $result = mysql_query("SELECT * FROM itemprofile");
    while($row = mysql_fetch_array($result))
        {
            $id = $row['id'];
            $stock = $row['stock'];
            echo '<option value="'.$row['productname'].'" id="'.$row['id'].'">'.$row['productname'].'</option>';
            $itemsStock[$id] = $stock;
        }

    ?>
</select>

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


 <script type="text/javascript">

var json_arr = <?php echo json_encode($itemsStock);?>;
var stockValues = JSON.parse(json_arr);

    function stock(sel)
    {
        var itemID = sel.value;
        console.log(itemID); // debug to see that you are getting the correct value
        document.getElementById('stockRemaining').innerHTML = stockValues[itemID];
    }

</script>

The convertion of array from php to jquery is fine, i tried echoing it out and it works fine, my problem is the stock() function, I think im doing something wrong on the action inside it cuz everytime I click a different item from the drop down menu, it doesnt show anything at all. Im pretty new to Jscript hope you guys can help me out. Thanks!

possible duplicate of [How to pass variables and data from PHP to JavaScript?](http://stackoverflow.com/questions/23740548/how-to-pass-variables-and-data-from-php-to-javascript) — JJJ, Feb 05 '15 at 08:03
Welcome to the "realm" of JavaScript (JS). A quick note, [JScript](http://en.wikipedia.org/wiki/JScript) is not same as current JavaScript, it's a dialect made my Microsoft and was used it older IEs. It's now (thankfully) long gone. Your code is also not [jQuery](http://jquery.com/), jQuery it's just a JavaScript library, it's not a style of code. — Marko Gresak, Feb 05 '15 at 08:04

score 1 · Accepted Answer · answered Feb 05 '15 at 17:26

I'm using an addEventListener. I don't know whether your onchange event on your select element is firing or not..

I modified your while loop (which is in an Html Comment field in this snippet) just to add consistency is the declaration and usage..

Code Snippet

with (Sample Php Echo Data)

document.getElementById("selectItem").addEventListener("change", stock);

//var json_arr = <?php echo json_encode($itemsStock);?>;
//  you need to determine what kind of array this will actually be: i.e. sequential, non-sequential
//  reference: http://php.net/manual/en/function.json-encode.php#example-3898

//  I'm presuming it will be a non-sequential with this demo data.
var json_arr = '{ ' +
'\"001\" : \"12000\",' +
'\"002\" : \"7000\",' +
'\"003\" : \"200\",' +
'\"004\" : \"10\"' + 
'}';
  
var stockValues = JSON.parse(json_arr);

function stock(ev)
{
    var itemID = ev.target.selectedOptions.item().id;
    console.log("%o - %o", stockValues, ev.target.selectedOptions.item().id); // debug to see that you are getting the correct value
    document.getElementById('stockRemaining').innerHTML = stockValues[itemID];
}

<select id="selectItem">
    <!--
    <?php
     --- connection here ----
    $itemsStock = array();
    $result = mysql_query("SELECT * FROM itemprofile");
    while($row = mysql_fetch_array($result))
        {
            $id = $row['id'];
            $stock = $row['stock'];
            $productname = $row['productname'];

            echo '<option value="'.$productname.'" id="'.$id.'">'.$productname.'</option>';

            $itemsStock[$id] = $stock;
        }

    ?>
    -->
    <option value="coke" id="001">coke</option>
    <option value="pepsi" id="002">pepsi</option>
    <option value="sprite" id="003">sprite</option>
    <option value="drpepper" id="004">drpepper</option>
</select>

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

Dinesh · Answer 2 · 2015-02-05T16:23:31.400

0

First change your select option to

<select id="selectItem" onchange="stock(this)">

now you can obtain the value in your stock function as

function stock(sel)
    {
        var itemID = sel.value;
        console.log(itemID); // debug to see that you are getting the correct value
        document.getElementById('stockRemaining').innerHTML = stockValues[itemID];
    }

You might want to create a javascript array from the PHP JSON

var json_arr = <?php echo json_encode($itemsStock);?>;
var stockValues = JSON.parse(json_arr);

Now the $itemstock is available as an array:

You can use:

document.getElementById('stockRemaining').innerHTML = stockValues[itemID];

Let me know if that works.

edited Feb 05 '15 at 16:23

answered Feb 05 '15 at 08:04

Dinesh

3,065
1
18
19

I got item "tinidor" on my drop down list, i tried picking it and i get this error on console log. tinidor testmode.php:25 Uncaught TypeError: Cannot read property 'tinidor' of undefined – Mark Te Feb 05 '15 at 08:37
some obvious issues here: he's creating his array using `id` as the index, not `productname`.. which is what would be in the `sel.value` field.. also... you should consider doing `document.getElementById('selectItem').selectedOption.item().value` instead – Brett Caswell Feb 05 '15 at 17:08

How to get the id of element from php to javascript?

2 Answers2

Code Snippet