Question

I have an html form with a lot of options that a user would fill out (name, email, etc.), and then I will have a dropdown asking the user to select either “Style A” or “Style B”.

If “Style A” is picked then there will be specific sizes for this style, if “Style B” is selected then there will be specific sizes for this style, etc.

However, I’m a complete noob when it comes to anything past xhtml/css and minimal PHP/javascript (very minimal) so I’m not sure exactly how to accomplish this. Will these options be displayed when the user selects style a/b or will the user have to select the style, click submit, and another form loads? I’m not sure exactly how this can be done, so anything works in my book!

Can anyone help me out with issue?

Thank’s a ton for any help with this.

Answer 1

You can do this completely with Javascript. Style ‘A’ will be a class (or set of classes) and Style ‘B’ will be another class (or set).

When the user selects Style ‘A’, run through all of your elements that you want to update, and their appropriate class from Style ‘A’. If the user selects Style ‘B’, do the same for it.

HTML

<select id = 'styler' name = 'styler'>
    <option value = 'a'>Style A</option>
    <option value = 'b'>Style B</option>
</select>

---

Javascript

(Using jQuery for simplicity)

$(function() {
    $('#styler').bind("change", function() {
        if($(this).val() == 'a')
            $(".bClass").removeClass("bClass").addClass("aClass");
        else
            $(".aClass").removeClass("aClass").addClass("bClass");
    });
});