Jump to content

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


jworisek

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?
Link to comment
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]
Link to comment
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]
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • 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.