data from database into js array

[mbarandao]

Hello:

I was wondering if I can get some guidance on how to pull data from mysql and inserted in js array in the following manner

var option_array = new Array(num_of_cats);

    option_array[0] = new Array(\"You need to select a category\"); // This is the first (blank) category. Don't mess with it.
    option_array[1] = new Array(\"-- Select One --\",\"\",\"\",\"\");
    option_array[2] = new Array(\"-- Select One --\",\"\",\"\");
    option_array[3] = new Array(\"-- Select One --\",\"\",\"\");
    option_array[4] = new Array(\"-- Select One --\",\"\",\"\",\"\");
    option_array[5] = new Array(\"-- Select One --\",\"\",\"\");
    option_array[6] = new Array(\"-- Select One --\",\"\",\"\");
    option_array[7] = new Array(\"-- Select One --\",\"\",\"\");
    option_array[8] = new Array(\"-- Select One --\",\"\",\"\",\"\");
    option_array[9] = new Array(\"-- Select One --\",\"\",\"\");
    option_array[10] = new Array(\"-- Select One --\",\"\",\"\");
    option_array[11] = new Array(\"-- Select One --\",\"\",\"\");
    option_array[12] = new Array(\"-- Select One --\",\"\",\"\");
    option_array[13] = new Array(\"-- Select One --\",\"\",\"\");
    option_array[14] = new Array(\"-- Select One --\",\"\",\"\");
    option_array[15] = new Array(\"-- Select One --\",\"\",\"\");
    option_array[16] = new Array(\"-- Select One --\",\"\",\"\");
    option_array[17] = new Array(\"-- Select One --\",\"\",\"\");
    option_array[18] = new Array(\"-- Select One --\",\"\",\"\");
    option_array[19] = new Array(\"-- Select One --\",\"\",\"\");


    var text_array = new Array(num_of_cats);

    text_array[0] = new Array(\"Please Select a Merchandise\"); // These are general instructions. Change them if you want, or keep them if you don't.
    text_array[1] = new Array(\"Butterfly Paddle Blade\");
    text_array[2] = new Array(\"Newgy Robot Balls by Dozen\");
    text_array[3] = new Array(\"Mini Table For Students training\");
    text_array[4] = new Array(\"Nice Cold Drink of H2O\");
    text_array[5] = new Array(\"Replenish that thirst with this cold drink of Gatorate\");
    text_array[6] = new Array(\"Flextra Butterfly paddle combination\");
    text_array[7] = new Array(\"Membership Renewal\");
    text_array[8] = new Array(\"Individual Private Lesson for Adults with our Coach Jack by the hour\");
    text_array[9] = new Array(\"Individual Private Lesson for Children with our Coachby the hour\");
    text_array[10] = new Array(\"Group Lesson for Adults. For this class, a Min 3 and Max 6 persons by the hour\");
    text_array[11] = new Array(\"Group Lesson for Children. For this class, a Min 3 and Max 6 persons by the hour\");
    text_array[12] = new Array(\"Membership -- Couples (2)\");
    text_array[13] = new Array(\"Membership -- Family (Max 4)\");
    text_array[14] = new Array(\"Robot Usage -- 30 Minutes Increments\");
    text_array[15] = new Array(\"Gift Certificate -- Please provide certificate receiver's name below\");
    text_array[16] = new Array(\"Adding Value to an Existing Gift Certificate\");
    text_array[17] = new Array(\"RTTC Shirt -- Custom Stiched Shirt\");
    text_array[18] = new Array(\"other\");
    text_array[19] = new Array(\"Give Credit to a member or player\");



    var text_array2 = new Array(num_of_cats);
    text_array2[1] = new Array(\"160.00\");
    text_array2[2] = new Array(\"6.00\");
    text_array2[3] = new Array(\"175.00\");
    text_array2[4] = new Array(\"1.00\");
    text_array2[5] = new Array(\"2.00\");
    text_array2[6] = new Array(\"60.00\");
    text_array2[7] = new Array(\"30.00\");
    text_array2[8] = new Array(\"40.00\");
    text_array2[9] = new Array(\"35.00\");
    text_array2[10] = new Array(\"25.00\");
    text_array2[11] = new Array(\"20.00\");
    text_array2[12] = new Array(\"50.00\");
    text_array2[13] = new Array(\"70.00\");
    text_array2[14] = new Array(\"5.00\");
    text_array2[15] = new Array(\"0.00\");
    text_array2[16] = new Array(\"0.00\");
    text_array2[17] = new Array(\"25.00\");
    text_array2[18] = new Array(\"0.00\");
    text_array2[19] = new Array(\"0.00\");


    var text_array3 = new Array(num_of_cats);
    text_array3[1] = new Array(\"\");
    text_array3[2] = new Array(\"\");
    text_array3[3] = new Array(\"\");
    text_array3[4] = new Array(\"\");
    text_array3[5] = new Array(\"\");
    text_array3[6] = new Array(\"\");
    text_array3[7] = new Array(\"\");
    text_array3[8] = new Array(\"\");
    text_array3[9] = new Array(\"\");
    text_array3[10] = new Array(\"\");
    text_array3[11] = new Array(\"\");
    text_array3[12] = new Array(\"\");
    text_array3[13] = new Array(\"\");
    text_array3[14] = new Array(\"\");
    text_array3[15] = new Array(\"Important Notice For Gift Card Below!\");
    text_array3[16] = new Array(\"\");
    text_array3[17] = new Array(\"\");
    text_array3[18] = new Array(\"\");
    text_array3[19] = new Array(\"\");

    var text_array4 = new Array(num_of_cats);
    text_array4[1] = new Array(\"1\");
    text_array4[2] = new Array(\"1\");
    text_array4[3] = new Array(\"1\");
    text_array4[4] = new Array(\"1\");
    text_array4[5] = new Array(\"1\");
    text_array4[6] = new Array(\"1\");
    text_array4[7] = new Array(\"1\");
    text_array4[8] = new Array(\"1\");
    text_array4[9] = new Array(\"1\");
    text_array4[10] = new Array(\"1\");
    text_array4[11] = new Array(\"1\");
    text_array4[12] = new Array(\"1\");
    text_array4[13] = new Array(\"1\");
    text_array4[14] = new Array(\"1\");
    text_array4[15] = new Array(\"1\");
    text_array4[16] = new Array(\"1\");
    text_array4[17] = new Array(\"1\");
    text_array4[18] = new Array(\"1\");
    text_array4[19] = new Array(\"1\");

thanks!,
Mossa

[pritaeas]

Is this what you want?

[mbarandao]

Pritaeas, thanks for your post! I do not believe json is what I'm looking for. I have since my initial post gained some grounds on this issue, but now getting som js errors.

errors:
uncaught TypeError: Cannot set property 'selectedIndex' of undefined
Uncaught TypeError: Cannot read property 'options' of undefined

Here is what have so far: (only the js portion with php sql queries embeds)

$display_block .="
<script language='JavaScript'>
var num_of_cats = 17; // This is the number of categories, including the first, blank, category.
var open_in_newwindow=1; //Set 1 to open links in new window, 0 for no.

";
 $result = mysql_query("SELECT * FROM products");

$display_block .="var option_array = new Array(num_of_cats);";

$count=1;
$display_block .="option_array[0] = new Array(\"Please Select a Merchandise\");";
while($row = mysql_fetch_array($result))
  {
//$display_block .=" option_array[".$count."] = new Array(\"".$row['item']."\");";
$display_block .="option_array[".$count."] = new Array(\"--select One--\",\"\",\"\");";
$count++;

}

   $result2 = mysql_query("SELECT * FROM products");

//$display_block .="<br /><br />";
$display_block .="var text_array = new Array(num_of_cats);";

$count=1;
$display_block .="text_array[0] = new Array(\"Please Select a Merchandise\");";
while($row_1 = mysql_fetch_array($result2))
  {
$display_block .=" text_array[".$count."] = new Array(\"".$row_1['product_desc']."\");";
$count++;

}

$result3 = mysql_query("SELECT * FROM products");

//$display_block .="<br /><br />";
$display_block .="var text_array2 = new Array(num_of_cats);";

$count=1;
$display_block .="text_array2[0] = new Array(\"Please Select a Merchandise\");";
while($row_2 = mysql_fetch_array($result3))
  {
$display_block .="text_array2[".$count."] = new Array(\"".$row_2['unit_cost']."\");";
$count++;

}

$result4 = mysql_query("SELECT * FROM products");

//$display_block .="<br /><br />";
$display_block .="var text_array3 = new Array(num_of_cats);";

$count=1;
$display_block .="text_array3[0] = new Array(\"Please Select a Merchandise\");";
while($row_3 = mysql_fetch_array($result4))
  {
$display_block .="text_array3[".$count."] = new Array(\"".$row_3['other']."\");";
$count++;

}

$display_block .="

function switch_select()

{
  for (loop = window.document.PaymentForm.select_2.options.length-1; loop > 0; loop--)
  {
    window.document.PaymentForm.select_2.options[loop] = null;
  }
  for (loop = 0; loop < option_array[window.document.PaymentForm.select_1.selectedIndex].length; loop++)
  {
    window.document.PaymentForm.select_2.options[loop] = new Option(option_array[window.document.PaymentForm.select_1.selectedIndex][loop]);
  }
    window.document.PaymentForm.select_2.selectedIndex = 0;
}

function switch_text()
{
  window.document.PaymentForm.textarea_1.value = text_array[window.document.PaymentForm.select_1.selectedIndex][window.document.PaymentForm.select_2.selectedIndex];
  window.document.PaymentForm.cost.value = text_array2[window.document.PaymentForm.select_1.selectedIndex][window.document.PaymentForm.select_2.selectedIndex];
  window.document.PaymentForm.gift_card.value = text_array3[window.document.PaymentForm.select_1.selectedIndex][window.document.PaymentForm.select_2.selectedIndex];
  //window.document.PaymentForm.qty.value = text_array4[window.document.PaymentForm.select_1.selectedIndex][window.document.PaymentForm.select_2.selectedIndex];

  }
function box()
{
  if (window.document.PaymentForm.select_2.selectedIndex == 0)
  {
    alert(\"Sorry, you have to select an item\");
  } else {
    if (open_in_newwindow==1)
    window.open(url_array[window.document.PaymentForm.select_1.selectedIndex][window.document.PaymentForm.select_2.selectedIndex],\"_blank\");
    else
    window.location=url_array[window.document.PaymentForm.select_1.selectedIndex][window.document.PaymentForm.select_2.selectedIndex]
  }
}
function set_orig()
{
  window.document.PaymentForm.select_1.selectedIndex = 0;
  window.document.PaymentForm.select_2.selectedIndex = 0;
}
window.onload=set_orig
</script>

The above script is the js that is inside a php file. I'm able to pull the data and the arrays are created -- I'm to see this from webpage source code.

now, inside the html part of the file, I'm pulling the item list from the db and passing it to list box. the code:

$get_products = "select id as id_num, items as display_name2 from products order by id_num"; 
   $get_products_res = mysql_query($get_products) or die (mysql_error()); 

if (mysql_num_rows($get_products_res) < 1) 
  { 
       // no records 
       $display_block .="<p><em>Sorry, no records to select</em></p>"; 
    } 

  else 
   { 
    $display_block .="

<td valign='top' style='border-left: 0px solid #cccccc;' width='15%'> <form name='form_1' onSubmit='return false;'>
      <select name=\"select_1\" style='background:url(../images/product-icon.png) #FFFFFF no-repeat 30% 5%; border-width:0px; width:200px; color:#003399; text-align:center; font-size:1em' onChange=\"switch_select(); switch_text();\"> 
      <option value=\"\">-- Select an Item --</option>"; 
 while ($recs2 = mysql_fetch_array($get_products_res)) 
      { 
          $id_num = $recs2['id_num']; 
          $display_name2 = stripslashes($recs2['display_name2']); 

 $display_block .= "<option value=\"$id_num\">
               $display_name2</option>"; 

                     } 
      }

the output is:

<select name="select_1" style='background:url(../images/product-icon.png) #FFFFFF no-repeat 30% 5%; border-width:0px; width:200px; color:#003399; text-align:center; font-size:1em' onChange="switch_select(); switch_text();"> 
      <option value="">-- Select an Item --</option><option value="1">
               5 A Series Blades</option><option value="2">
               Balls</option><option value="3">
               TT Tables-Mini</option><option value="4">
               Bottle Water</option><option value="5">
               TT Tables -- Reg</option><option value="6">
               Gatorate</option><option value="7">
               Blade combo</option><option value="8">
               Membership Renewal</option><option value="9">
               1 hr Private Lesson (Adlt)</option><option value="10">
               1 hr Private Lesson (Chld)</option><option value="11">
               Group Lesson (Adlt)</option><option value="12">
               Group Lesson (Chlidren)</option><option value="13">
               Membership (Couples-2)</option><option value="14">
               Membership (Family -Up 4)</option><option value="15">
               Robot Play</option><option value="16">
               Gift Certificate</option><option value="17">
               Gift Card Add Value</option><option value="18">
               Club T-Shirts</option><option value="19">
               Member Credit</option><option value="20">
               Other</option><option value="21">
               Rubber - 1615 PIPS </option><option value="22">
               Rubber -Volant 3</option><option value="23">
               6 A Series Blades</option><option value="24">
               Blades Only -China QI</option><option value="25">
               Blades Only -CQ 1</option><option value="26">
               Ross-Action Blade</option><option value="27">
               Ross-Classic Blade</option>    

I'm getting these errors pertain to the js:
uncaught TypeError: Cannot set property 'selectedIndex' of undefined
Uncaught TypeError: Cannot read property 'options' of undefined

here is the function which purpose is to pass additional information to textbox and texarea box on selection from the list.

function switch_text()
{
  window.document.PaymentForm.textarea_1.value = text_array[window.document.PaymentForm.select_1.selectedIndex][window.document.PaymentForm.select_2.selectedIndex];
  window.document.PaymentForm.cost.value = text_array2[window.document.PaymentForm.select_1.selectedIndex][window.document.PaymentForm.select_2.selectedIndex];
  window.document.PaymentForm.gift_card.value = text_array3[window.document.PaymentForm.select_1.selectedIndex][window.document.PaymentForm.select_2.selectedIndex];
  //window.document.PaymentForm.qty.value = text_array4[window.document.PaymentForm.select_1.selectedIndex][window.document.PaymentForm.select_2.selectedIndex];

  }
function box()
{
  if (window.document.PaymentForm.select_2.selectedIndex == 0)
  {
    alert(\"Sorry, you have to select an item\");
  } else {
    if (open_in_newwindow==1)
    window.open(url_array[window.document.PaymentForm.select_1.selectedIndex][window.document.PaymentForm.select_2.selectedIndex],\"_blank\");
    else
    window.location=url_array[window.document.PaymentForm.select_1.selectedIndex][window.document.PaymentForm.select_2.selectedIndex]
  }
}
function set_orig()
{
  window.document.PaymentForm.select_1.selectedIndex = 0;
  window.document.PaymentForm.select_2.selectedIndex = 0;
}
window.onload=set_orig

My apologies, for the lengthy code! any thoughts on those two errors:

uncaught TypeError: Cannot set property 'selectedIndex' of undefined
Uncaught TypeError: Cannot read property 'options' of undefined

[pritaeas]

Your output appears incomplete. The <select> tag is not closed, and the errors you get may point to a missing select_2 dropdown.

[mbarandao]

Indeed! Indeed! Great catch. I have being looking at this code for hours. You have just relieved me of major fustration.

Much appreciated!

Mossa--