Jump to content

Archived

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

jworisek

using javascript in a php file to update menus based on selections

Recommended Posts

I'll say up front that I am a bit of an idiot when it comes to javascript... With that out of the way, I already have a script that updates on dropdown menu based on the users input for a different menu on the same page. Here is what I want to do:

lets say we have products and sizes

Product A: Sizes (Small, Medium, Xlarge)
Product B: Sizes (Xsmall, Large)
Product C: Sizes (Xsmall, Medium, Large, Xlarge)

right now, in php I place all the values into an array for submitting to the next page

[code]
<select name="product_id[]"><option value=""></option>....</select>
[/code]

The base code that I am currently using is this (NOTE: I build the arrays in php beforehand):

[code]<script LANGUAGE="JavaScript">
<!-- Original:  Jerome Caron (jerome.caron@globetrotter.net) -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
colors = new Array(
<? echo $color_array; ?>
);

function fillSelectFromArray(selectCtrl, itemArray, goodPrompt, badPrompt, defaultItem) {
var i, j;
var prompt;
// empty existing items
for (i = selectCtrl.options.length; i >= 0; i--) {
selectCtrl.options[i] = null;
}
prompt = (itemArray != null) ? goodPrompt : badPrompt;
if (prompt == null) {
j = 0;
}
else {
selectCtrl.options[0] = new Option(prompt);
j = 1;
}
if (itemArray != null) {
// add new items
for (i = 0; i < itemArray.length; i++) {
selectCtrl.options[j] = new Option(itemArray[i][0]);
if (itemArray[i][1] != null) {
selectCtrl.options[j].value = itemArray[i][1];
}
j++;
}
// select first item (prompt) for sub list
selectCtrl.options[0].selected = true;
   }
}
//  End -->
</script>[/code]

[code]<form method="POST" action="two.php" name="Main">
  <h1>New Order</h1>
  <h2>Process</h2>
    <SELECT NAME="process_id" onChange="fillSelectFromArray(this.form.color_id, ((this.selectedIndex == -1) ? null : colors[this.selectedIndex-1]));">
        <OPTION VALUE="-1">Select Process</option>
      <? echo $process_list; ?>
    </SELECT>
    <h2>Enhancement</h2>
    <SELECT NAME="color_id">
      <option value="0">Select Enhancement</option>
    </SELECT>
  <input type="submit" value="submit" name="submit" />
</form>[/code]

In this example, changing the process updates the color list to only colors associated with that process. This is exactly like what I want to do with the products/sizes but the product/sizes has multiple line items and has to be passed as an array. When I try to work the hard brackets into the name being called with this script it simply ignores it. Any ideas?

Share this post


Link to post
Share on other sites
You can give the select an ID and access the select object using that
[code]
<select name="product_id[]" id="product_id">
[/code]
Javascript will be like
[code]
document.getElementById('product_id')
[/code]

Share this post


Link to post
Share on other sites
that should be able to work... the problem is that I don't really have a clue how to adapt that script to use ids instead of names. Can you give me a hand with that?

[!--quoteo(post=387215:date=Jun 23 2006, 11:20 AM:name=nogray)--][div class=\'quotetop\']QUOTE(nogray @ Jun 23 2006, 11:20 AM) [snapback]387215[/snapback][/div][div class=\'quotemain\'][!--quotec--]
You can give the select an ID and access the select object using that
[code]
<select name="product_id[]" id="product_id">
[/code]
Javascript will be like
[code]
document.getElementById('product_id')
[/code]
[/quote]

Share this post


Link to post
Share on other sites

×

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.