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

[Jordan]

I've actually used the hidden div method to accomplish a similar task (although I'm not sure why you would do this via AJAX and onload and not just directly with your server side language).

I would, however, use a select onchange like your thread title states. When the user changes the the select option you could call a function which fetches all of the values from the database and populates another drop-down or radio buttons. This will cause the user some bit of lag (more for slow connections) but will reduce load and save bandwidth.

[norbie]

Hi Jordan

I really don't know a lot about ajax at all other than having used some code snippets before for the hidden div methods to "swap" a div.

I don't even know what code to use to change a div with a select onchange, nevermind pulling data from the database at that time!

[norbie]

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

EDIT: I can't post links or images, how can I get round this? It would be much easier if you can see the picture.

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.

[Feral]

What you want to do is straight forward and only requires basic javascript. Ajax isn't required because you don't need to load any additional data because everything was loaded with the page but things are hidden.

What you need to do is add an onChange event to the drop down menu that calls a function to hide the current color div and show the correct div for the selected color.

Using a javascript library like jQuery would make this very easy for you and would only require about three lines of code.

[norbie]

Hi Feral,

I've been giving jquery a go and I hope you can help with the syntax I need to get this to work! So far I have been able to use the onchange event with jquery to show a hidden div. What I need to do now is specify to load a certain div, depending on which option has been selected from the select box.

Here is the code I have now:

  $(document).ready(function(){
    
    $("select").change(function () {
        $("tr#colYellow").show()
    })

  });

<select name="product[]" class="categorymenu">      
<option id="colYellow" value="Yellow">Yellow</option>
<option id="colBlue" value="Blue">Blue</option>
<option id="colWhite" value="White">White</option>
</select>

<tr id="colYellow" style="display: none;">
<td>stuff</td>
</tr>

Note: I had to use the TR element to show/hide rather than a DIV as this content is in the middle of a table, and show/hide doesnt work if you have table elements inside the div to be hidden!

I hope you can help with this as I know that I am so close to getting it done!

[Feral]

Try something like this

<select name="product[]" class="categorymenu" id="colors">
<option value="Yellow">Yellow</option>
<option value="Blue">Blue</option>
<option value="White">White</option>
</select>

$(document).ready(function(){
  var col = col + $("#colors option:selected").val();
  $("#"+col).show();
});

Basically what I'm doing here is giving the select area the ID and using the jQuery form filters to get the value of the selected item then showing the corresponding div.

(I wrote this off the top of my head so not sure if I made a mistake or not)

[norbie]

That works, thank you so much!

[Feral]

No problem glad I could help