Jump to content

Recommended Posts

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.

Link to comment
https://forums.phpfreaks.com/topic/173413-ajax-solution-required-select-onchange/
Share on other sites

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

 

fvfbc6.jpg

 

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.

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.

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.