Jump to content


Photo

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


  • Please log in to reply
2 replies to this topic

#1 jworisek

jworisek
  • Members
  • PipPipPip
  • Advanced Member
  • 112 posts

Posted 22 June 2006 - 08:34 PM

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

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

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

<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>

<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>

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?

#2 nogray

nogray
  • Members
  • PipPipPip
  • Advanced Member
  • 930 posts
  • LocationSan Francisco CA

Posted 23 June 2006 - 04:20 PM

You can give the select an ID and access the select object using that
<select name="product_id[]" id="product_id">
Javascript will be like
document.getElementById('product_id')

NoGray.com


#3 jworisek

jworisek
  • Members
  • PipPipPip
  • Advanced Member
  • 112 posts

Posted 23 June 2006 - 05:26 PM

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) View Post[/div][div class=\'quotemain\'][!--quotec--]
You can give the select an ID and access the select object using that
<select name="product_id[]" id="product_id">
Javascript will be like
document.getElementById('product_id')
[/quote]





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users