Select $this, display $that - how to do it with a form?

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 w开发者_JS百科ill 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.

One good way would be to have a container around your form such as:

<div id="style_container" class="styleA">
  <form> .. </form>
</div>

Then you can have entries in your css files such as:

div.styleA input
div.styleB input

Finally, with jQuery on your page, assuming you have a select field with the options having the value of the style class names, you can do:

$("select#style_select").change(function(){
  $("div#style_container").removeClass("styleA styleB");
  $("div#style_container").addClass($(this).val());
});

So you only need to change that class on that container div and the entire page should update according to your css rules.

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");
    });
});

You already gave 2 solutions:

1. Single form, when the style option is selected, child options related to the specific style will be displayed, the easiest way to accomplish this is to have a JavaScript function (let's call it switch_size_display) display or hide the available options when the style selection is changed.
2. Multi-page form, this is more difficult and less preferable to your visitors, this can be accomplished using cookies, Get or Post : On page 1, the user will select "style" which will be saved on a variable (cookie/get/post), on page 2, the user will be presented with the "sizes" relative to the style found on the variable.

It you are learning Javascript and PHP, both these solutions are very good exercises. One last thing is that you should never trust user input, if you are creating a website that will be available online (not locally) please make sure that you validate strictly anything that comes from URL, Cookies etc...