Ajax solution required - select onchange?

[norbie]

Hi guys,

 

I have a coding problem here that I can't quite figure out. For a clothing website I need to display information for each product related to colours and sizes available.

 

I'm using a mysql database to store information on what sizes and colours are available. The structure for this is as follows:

 

`prodcolours` table

`colour_id`

`colour_name` e.g. Brown

 

`prodsizes` table

`colour_id`

`size` e.g. M

`instock` (boolean)

 

Might not be the easiest way to describe it, but every product has many colours. Each colour has a record stored in the database for S, M, L sizes and has a boolean field to determine whether or not it is in stock.

 

On the product page, there is a drop down box for the user to select a colour. When the user selects a colour I need to show relevant radio buttons for the sizes available in that colour. Sizes that are not available show as greyed out (disabled="disabled"). This works absolutely fine when hardcoding the options for just 1 colour.

 

The issue lies when the user selects a colour, I want the radio buttons to change to reflect the sizes available for the selected colours.

 

The best way I thought of doing this is on page load, create a hidden div for each possible colour and fill them with the right radio buttons code. When the select drop down for colour is changed, make the correct div visible.

 

e.g. colour1 is selected so make the colour1 div visible which contains the right size stock information.

 

Does this make sense? I am very grateful for your help and suggestions.

[norbie]

Any suggestions?

 

Please say if you need a better explanation.

 

Many thanks.

[gizmola]

Is this a detail page for the individual item?  If so, I don't see why you wouldn't load up the information when the page is generated.  No Ajax would be required.

[norbie]

I hope this explains it better, this is what I have at the moment:

 

 

When a user selects a different colour from the drop down box, a new set of radio buttons must be loaded to represent the stock available in that colour. e.g. for the colour yellow, the "m" radio button is disabled as this product is out of stock in the colour + size.

 

I thought the best way to do this would be to have the radio buttons within a div, and on page load create say 2 divs that are hidden, 1 for yellow, 1 for blue and when the user selects the relevant colour, un-hide the relevant one.

[gizmola]

That sounds like a good approach.  While that would require some javascript, it would not require AJAX per se.  As for seperate divs, you really don't need to do that.  Just load the inventory into a javascript array or seperate variables, and when the drop down changes you can update whatever html object you're using to display the value.