Member Avatar for Norbie

Hi guys,

I have a coding problem here that I can't quite figure out. For a clothing website I need to display stock 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.

  • 1 Contributor
  • 1 Reply
  • 70 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Norbie
Member Avatar for Norbie

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

[img]http://i25.tinypic.com/fvfbc6.jpg[/img]

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.