Get multiple values onChange?!?!

JavaScript
1

I’m trying to figure out how I can pass multiple values to my javascript from one selectbox.

This is what I got now:

function Update(item)
{
	product_id = item.name;
	price_id = item.price;
	color_id = item.color;
	newQty = item.options[item.selectedIndex].text;
	document.location.href = 'index.php?page=myCart&product_id='+product_id+'&price_id='+price_id+'&color_id='+color_id+'&qty='+newQty+'&action=update_product';
}

The form element:

<select name="<? echo $product_id; ?>" onchange="Update(this);">
	<option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

As you can see the product_id get passed to the javascript, but it is essential that I get the price and color id passed along… Is that possible, and if yes…HOW???

Please help and thanks in advance :slight_smile:

2

Where would the color and price be? Maybe you have other form elements?

3

To be able to select multiples you need

<select name=“<? echo $product_id; ?>” onchange=“Update(this);” multiple>

The multiple selections should then be passed to the JavaScript instead of just the one so that rather than just getting the selectedIndex you’d need to loop through the array and see which are selected.

4

`

The Color and price is part of the product as the product_id. Imagine that I have a bunch of products in a loop, and the quantity is a option for each product…

So mayby if there is a way to comma seperate the ids in the selectname like this:

<select name="<? echo $product_id.','.$price_id.','.$color_id; ?>" onchange="Update(this);">

And then somehow in the javascript split the (item) up by the commas… Just dont know if thats possible or if so, how???

5

And then… Solved it…:slight_smile:

Here is what I did:

<select name="<? echo $row['product_id'].'/'.$row['price_id'].'/'.$row['color_id']; ?>" onchange="Update(this);">

And in the javascript:

var myString = item.name;
	myArray = myString.split("/");
	
	product_id =  myArray[0];
	price_id =  myArray[1];
	color_id =  myArray[2];

Voila… Thanks alot for your help guys :wink:

6

Unless there’s some compelling reason to do something mucky like build a comma delimited string as the name, I wouldn’t.

A function can take multiple arguments.


function Update(selectElement, color, price) {
    ...
}

Then you could just embed the values into the html.
Update(this, ‘red’, 5.99);

But…is there a reason why you aren’t just using a form(s)? If want the form to submit automatically when the user makes a selection from a menu, you can do that while still using a form. Then you don’t require javascript for it to work.

onchange=“this.form.submit()”

And then just make some input elements for the color and price.

I’m not sure how you’re handling this, but thought I’d mention that you should make sure the user doesn’t change the price. So check it against a list, or create some kind of numerical id that maps to a specific combination of name, color, and price, that only you know about, and just use that as the id in the html.