Jump to content

PHP to dynamically create the JavaScript arrays


jbrill

Recommended Posts

im trying to create autopopulating dropdowns and i need to know how to create javascript arrays that are created from a database through php.

 

how would i do this? here is my code:

<html>
<head>

<script type="text/javascript">


// State lists
var states = new Array();

states['Canada'] = new Array('Alberta','British Columbia','Ontario');
states['Mexico'] = new Array('Baja California','Chihuahua','Jalisco');
states['United States'] = new Array('California','Florida','New York');


function setStates(){

cntrySel = document.getElementById('country');
cntryVal = cntrySel[cntrySel.selectedIndex].value;

if (states[cntryVal]) {
  stateList = states[cntryVal];
} else {
† stateList = false;
}

changeSelect('state', stateList);

}

function changeSelect(fieldID, newList) {

selectField = document.getElementById(fieldID);
selectField.options.length = 0;

if (newList!=false) {

  for (i=0; i<newList.length; i++) {
   selectField.options[selectField.length] = new Option(newList[i], newList[i]);
  }
  selectField.disabled = false;

} else {

  selectField.options[selectField.length] = new Option('Not Applicable', '');
  selectField.disabled = true;

}
}

</script>

</head>

<body onload="setStates();">
<form name="test" method="POST" action="processingpage.php">

Country: 
<select name="country" id="country" onchange="setStates();">
<option value="Canada">Canada</option>
<option value="Mexico">Mexico</option>
<option value="United States">United States</option>
<option value="CountryA">CountryA</option>
<option value="CountryB">CountryB</option>
</select>
<br>

State: 
<select name="state" id="state">
<option value="">Not Applicable</option>
</select>
<br>

</form>
</body>
</html>

 

 

What you have is much more complicated than what you need...try something like this...

 

<?php
//testpage.php

$select=mysql_query("SELECT * FROM table") or die(mysql_error());

echo "<form name=\"category\" method=\"post\" action=\"testpage.php\">";

echo "Category 1: <select name=\"category1\" onChange=\"javascript: document.category.submit()\">"
. "<option value=\"\" selected>--Category 1--<\option>";
while($cat1=mysql_fetch_array($select)){
echo "<option value=\"$cat1[category]\"";

If($_POST[category1]==$cat1[category]) {
echo " selected";
}

echo ">$cat1[category]</option>";
}
echo "</select></form>";

If ($_POST[category1]) {

$select2=mysql_query("SELECT * FROM table WHERE category='$_POST[category1]' ") or die(mysql_error());

echo "SubCategory: <select name=\"category2\">"
."<option value=\"\" selected>--SubCategory--</option>";

while ($cat2=mysql_fetch_array($select2)) {
echo "<option value=\"$cat2[category2]\">$cat2[category2]</option>";
}

echo "</select>";

}Else{

echo "<select name=\"category2\"><option value=\"\">--SubCategory--</option></select>";

}
?>

 

You will need to tailor this to your environement, it is a little sloppy im sure you can clean this up, I just did it quick on the fly, but you should get the jist of it.

It not hard at all. Simply use php to write the arrays, just as you nromally write html. If you post the code that completes your query it will be much easier to post an example, but something like this is what you'd use....

 

<?php

  while ($row = mysql_fetch_assoc($result)) {
    echo "states['{$row['contry]}'] = new Array('{$row['city]}');";
  }

?>

All you will need to do is setup a query to get all of category. Then you will setup another query inside of your loop to query for all the results for that single category for each subcategory. After this query you will then echo out the javascript to add each result to the array. The array key is the category and the array value is the subcategory.

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.