SitePoint Sponsor

User Tag List

Results 1 to 16 of 16

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Array [document.getElementById().value][2] not working

    Hi, hello everyone this is my first post. I have exhausted manuals and tutorials and posts and I can't get this to work.
    Hope somebody here can help me.

    I have a mySql query then from the data an array is created. With values from the array a dropdown list for a form is created. Then a javascript array is created from the php array. and an onchange() function is trying to change an image in a field, using the ID value from the dropdown list selection (dropd.value) as key in the Array (to display the image name).

    Code PHP:
    <?PHP
    include 'open_connection_con.php';
    $prod_query = mysqli_query($con,"SELECT id, type, image_name, description FROM Products");
     
    $products = array();
    while($row = mysqli_fetch_array($prod_query))
    	{
    		$products[] = $row;
    	}
     
    // then I create a dropdown list within a form.
    echo "<select name='prodType' id='prodDrop' onchange='swapProd()'>";
    echo "<option value='0'>Select one:</option>";
    foreach ($products as $row)
    	{
    		echo "<option value='" . $row['id'] . "'>" . $row['type'] . "</option>";
    	}
    echo "</select>";
     
    mysqli_close($con);
    ?>

    Code JavaScript:
    <script type="text/javascript">
     
    // pass the php array into a javascript array.
    var prodArrJS = <?php echo json_encode($products);?>
     
    // and the function to display the image (on <img id="prodImage">) of the selected product from the dropdown list above
    function swapProd()
    {
    var image = document.getElementById("prodImage");
    var dropd = document.getElementById("prodDrop");
    image.src = "images/ex/" + prodArrJS[dropd.value][2] + ".jpg";
    var p1=document.getElementById("lar");
    p1.value="x"
    }
    </script>

    Code PHP:
    <?php
    unset( $products );
    ?>

    The image at the end of the function is not displayed (nothing is displayed, not even the little question mark) and the function stops.
    I have tested the array with numbers and strings and it works ok.
    Thanks in advance.
    R.Mars

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    16,446
    Mentioned
    160 Post(s)
    Tagged
    1 Thread(s)
    Hi robert.mars, welcome to the forums,

    Shouldn't "value" be "selectedIndex.value"?

  3. #3
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no, the value gets picked up from the <form><select><option> dropdown list generated in the PHP here:

    Code:
    ...
    echo "<select name='prodType' id='prodDrop' onchange='swapProd()'>";
    ...
    foreach ($products as $row)
    	{
    		echo "<option value='" . $row['id'] . "'>" . $row['type'] . "</option>";
    	}
    echo "</select>";
    ...
    with the $row["id"] from the original PHP "$products" Array as value for the option,
    then via ".getElementById" on the function to the var dropd here:

    Code:
    function swapProd()
    {
    ...
    var dropd = document.getElementById("prodDrop");
    image.src = "images/ex/" + prodArrJS[dropd.value][2] + ".jpg";
    ...
    }
    The "prodArrJS" javascript Array where I'm trying to use dropd.value as index was created here (in the script before the function):

    Code:
    ...
    var prodArrJS = <?php echo json_encode($products);?>
    ...

  4. #4
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    16,446
    Mentioned
    160 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by robert.mars View Post
    no, the value gets picked up from the <form><select><option> dropdown list generated in the PHP here:
    .....
    So if you temporarily try this (not the most elegant way perhaps but it works)
    Code JavaScript:
    function swapProd()
    {
    var image = document.getElementById("prodImage");
    var dropd = document.getElementById("prodDrop");
    /* next line for troubleshooting only */
    alert(dropd.value);
    image.src = "images/ex/" + prodArrJS[dropd.value][2] + ".jpg";
    var p1=document.getElementById("lar");
    p1.value="x"
    }
    you get an "index" and not "undefined"?

  5. #5
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The alert throws the correct value: 47, 60, 61, etc. depending on the choice.
    dropd.value works everywhere else I have tested it except in the Array.

  6. #6
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    16,446
    Mentioned
    160 Post(s)
    Tagged
    1 Thread(s)
    Ah. I think I see the problem now.

    json_encode returns a string not an array

    Try tossing json_decode into the mix.
    Returns an object or if the optional assoc parameter is TRUE, an associative array is instead returned.

  7. #7
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just realized something, you mentioned earlier that it would be preferable a php array than a javascript.
    Could I create a global array variable? Global means that even if you change from one page to another the variable remains and can be used in all pages right?
    That would work better for me that what I have been trying to do with the "query to php array to javascript array".


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •