[SOLVED] Arrays and javascript

[rwalsh0975]

Hey all, this is my first post and I know what I am doing wrong I am just not versed well enough in php nor javascript to find a workaround.  I have the following code which makes an array based on the itemname and then populates the array with information previously received from a mysql query and this part works.

 

while ($row=mysql_fetch_array($result)) {
  $id = $row["id"];
      $itemname=$row["itemname"]; 
  $upc=$row["UPC"];
  $instock=$row["instock"];
  $price=$row["price"];
  $options.="<OPTION VALUE=\"$itemname\">".$itemname.'</option>';
	?>
 var $arrayname = <?php echo "'$itemname'" ?>;
  $arrayname = new Array();
	//Create array dependent on $itemname and insert data into it.

	$arrayname[0] = <?php echo "'$id'" ?>;
	$arrayname[1] = <?php echo "'$itemname'" ?>;
	$arrayname[2] = <?php echo "'$upc'" ?>;
	$arrayname[3] = <?php echo "'$instock'" ?>;
	$arrayname[4] = <?php echo "'$price'" ?>;

<?php } ?>

 

I then have a drop down menu that contains all of the 'itemname's and therefore all the names of the arrays.  However, the 'value' of the drop down menu items is not the array themselves, but merely the names and I pass the name to a javascript that will populate textboxes with correlated information.  What I want to know is how can i manipulate it so that it will either pass the arrays themselves or once the name is passed to the js function have it determine that I want it to use the array and not merely the name of the array.  Thanks in advance!!!

 

function displayInfo(itemname){

document.inventory.instock.value = itemname[3];
//Other populating stuff
}
</script>

<form action="availibility.php" name="inventory" method="POST">
Items in Inventory
<select name=itemname
onchange="displayInfo(document.inventory.itemname.value)">
  <option value=0>
  <?=$options?>
  </option>
</select>

[rwalsh0975]

*bump*

 

I have thought of another approach ... is it possible to put the array as the option value... ie. $options.="<OPTION VALUE="$_GET['arrayname']">".$itemname.'</option>';

 

or something like that???

[rwalsh0975]

Sorry for the bump again, I just hope it gets read by someone that can help me

[rwalsh0975]

*bump*

[roopurt18]

Your question is a little unclear so I'm going to try and restate it, let me know if this is correct:

 

You want a method of passing data in a MySQL database into Javascript.  You then want to display a drop down list and when the user selects an item from the list you want to choose the corresponding data you sent from MySQL.

 

Brief Tutorial

  // Creating a global variable in Javascript, I use window. to specify this specifically as global
  window.someVar = 5;  // Now there exists a global variable named someVar

  // Creating a generic object
  window.someObj = new Object(); // Now there exists a global object named someObj, but it
  // has no properties or methods

  // Creating some properties in our object
  window.someObj.aProperty = "Hello, World!";
  window.someObj.bProperty = "Goodbye, World!";

  // Displaying those values
  alert(window.someObj.aProperty); // Popup displays: "Hello, World!"
  alert(window.someObj.bProperty); // Popup displays: "Goodbye, World!"

  // When displaying the properties above, we explicitly stated (in code) which
  // property to display.  We can also access a property through a variable.
  var tmp = "aProperty"; // This is the property name
  alert(window.someObj[tmp]); // equivalent to: alert(window.someObj.aProperty);
  tmp = "bProperty"; // This is the property name
  alert(window.someObj[tmp]); // equivalent to: alert(window.someObj.bProperty);

  // Last but not least is "Object Literal Notation," search this on google for a more
  // in-depth explanation.  Briefly, we can enclose an object definition in curly braces { },
  // in the curly braces are comma-separated property-value pairs.
  window.literalObj = { // <-- Starts object literal notation
    aProperty : "Hello, World!", // <-- a property-value pair
    bProperty : "Goodbye, World!" // <-- another property-value pair
  }; <-- Ends object literal notation

  // We can access this object just like the first one
  alert(window.literalObj.aProperty); // Popup with "Hello, World!"

 

Understand the above before proceeding; once you do, we can create an outline of what our finished product will be:

  <-- This is a layout of the final HTML we want output to the browser -->
  <script type="text/javascript">
    window.mysqlData = new Object(); // Create a generic object

    // Now we want to create a property in our mysqlData object for each record in
    // the mysql database.  We will use object literal notation because it's cool,
    // convenient, and allows us to work with named values rather than integer-based
    // array indexes.
    window.mysqlData.rec_1 = {
      id : 1,
      name : "Peanut Butter",
      upc : "SomeString",
      inStock : true,
      price : 1.49
    };
    window.mysqlData.rec_2 = {
      id : 2,
      name : "Jelly",
      upc : "SomeString",
      inStock : false,
      price : 1.69
    };

    function changeItems(oEvent){
      // This is our event handler for the select box's onChange event.
      oEvent = oEvent || window.event; // Distinguish between DOM L2 or IE event models
      var oNode = oEvent.srcElement || oEvent.target; // DOM Node that triggered event
      // First we retrieve the value of the selected item
      var selVal = oNode.options[oNode.selectedIndex].value;
      // Now we access the corresponding property in window.mysqlData, remember to
      // add the 'rec_' prefix
      var obj = window.mysqlData["rec_" + selVal];
      // Now we can access the object any way we desire, you should modify this to use
      // the data however it is you intend
      alert( "id: " + obj.id + "\n" +
              "name: " + obj.name + "\n" +
              "upc: " + obj.upc + "\n" +
              "inStock: " + obj.inStock + "\n" +
              "price: " + obj.price + "\n" );
    }
  </script>

  <select id="selItems" name="selItem">
    <option value="1">Peanut Butter</option>
    <option value="2">Jelly</option>
  </select>

  <script type="text/javascript">
    // Add an onchange event handler to our select control
    try{
      var el = document.getElementById("selItems");
      if(document.addEventListener){ // DOM L2 method
        el.addEventListener("change", changeItems, false);
      }else if(document.attachEvent){ // IE method
        el.attachEvent("onchange", changeItems);
      }
    }catch(e){
      alert("Error:  Old browser!");
    }
  </script>

 

The above code is fairly straightforward once you become accustomed to it, but it's a lot to take at a single sitting.  I'm going to make a follow up post to help with the PHP side of it shortly.

[roopurt18]

Here's the PHP side of it.

 

<?php
  // We have two sections of the final output that are dynamic and depend on
  // the contents of our database.  We will build each of those sections in
  // this top portion and then insert them into the final output.

  $Options = Array();        // The select item's options
  $JS_OLN = Array();         // The Javascript object literal notations
  while($row = mysql_fetch_array($result)){
    // $row will have the following keys:
    //    id, itemname, UPC, instock, price
    $Options[] = "<option value=\"{$row['id']}\">{$row['itemname']}</option>";
    $instock = $row['instock'] ? "true" : "false";
    $JS_OLN[] = "window.mysqlData.rec_{$row['id']} = {"
              . "id : {$row['id']}, "
              . "name : \"{$row['itemname']}\", "
              . "upc : \"{$row['UPC']}\", "
              . "inStock : {$instock}, "
              . "price : {$row['price']} "
              . "};";
  }
?>
  <script type="text/javascript">
    window.mysqlData = new Object(); // Create a generic object

    // Now we want to create a property in our mysqlData object for each record in
    // the mysql database.  We will use object literal notation because it's cool,
    // convenient, and allows us to work with named values rather than integer-based
    // array indexes.
    <?=implode("\n", $JS_OLN)?>

    function changeItems(oEvent){
      // This is our event handler for the select box's onChange event.
      oEvent = oEvent || window.event; // Distinguish between DOM L2 or IE event models
      var oNode = oEvent.srcElement || oEvent.target; // DOM Node that triggered event
      // First we retrieve the value of the selected item
      var selVal = oNode.options[oNode.selectedIndex].value;
      // Now we access the corresponding property in window.mysqlData, remember to
      // add the 'rec_' prefix
      var obj = window.mysqlData["rec_" + selVal];
      // Now we can access the object any way we desire, you should modify this to use
      // the data however it is you intend
      alert( "id: " + obj.id + "\n" +
              "name: " + obj.name + "\n" +
              "upc: " + obj.upc + "\n" +
              "inStock: " + obj.inStock + "\n" +
              "price: " + obj.price + "\n" );
    }
  </script>

  <select id="selItems" name="selItem">
    <?=implode("\n", $Options)?>
  </select>

  <script type="text/javascript">
    // Add an onchange event handler to our select control
    try{
      var el = document.getElementById("selItems");
      if(document.addEventListener){ // DOM L2 method
        el.addEventListener("change", changeItems, false);
      }else if(document.attachEvent){ // IE method
        el.attachEvent("onchange", changeItems);
      }
    }catch(e){
      alert("Error:  Old browser!");
    }
  </script>

[rwalsh0975]

Thank you for your help, after a little fanagling, I got it to work just how I wanted!