Html 中的条件格式？

Question

I am writing a website and I am currently working on the sign up page. I have a drop down box and I want to have that drop down box open different sign up information for each one. For example: If they picked prime user it would change the sign up information they needed from just username and password to username, password, credit card number, and telephone number . OR if they picked partial user from the drop down list it would ask for username password and telephone. Any clue how to do this in HTML or any other computer language?

Answer 1

Assuming html like this:

Type:<br>
one <input type="radio" name="type" id="type-1" value="1" /><br>
two <input type="radio" name="type" id="type-2" value="2" />
<hr>
<form action="." METHOD="POST">
    <input class="second" type="text" name="name" id="name" value="name" />
    <input class="second" type="text" name="email" id="email" value="email" />
    <input class="second" type="text" name="credit-card" id="credit-card" value="credit card" />
</form>

And css like this: (to hide all the form fields except for type choice)

.second{
    display:none   
}

You can use jQuery javascript library to show/hide the required form fields dynamically like this:

// when type radio button is pressed
$('#type-1,#type-2').change(function(){

    // hide all form fields
    $('.second').hide()

    // if type is 1
    if($('#type-1:checked').length){

        // show name and email fields
        $('#name,#email').show()

    // else if type is 2
    }else if($('#type-2:checked').length){

        // show name, email and credit-card fields
        $('#name,#email,#credit-card').show()

    }     
})

This is demonstrated here: http://jsfiddle.net/rBvLA/

The result must be processed by server side script using any language you choose.

Answer 2

You might want to look into any of the many fine server side tools available, such as asp.net, php, etc... you could also use javascript.

For instance, using JavaScript, you could have an event fire when they change the drop down and in the code for that event handler, you could modify the DOM in such a way as to display the appropriate form elements for each selection.

Answer 3

another jQuery solution:

Live Demo

$('#reg_type input[type=radio]').change(function() {
    var type = $(this).attr('class');
    $('#reg_fields div').each(function() {
        if ($(this).hasClass(type)) {
            $(this).show().removeAttr('disabled');
        } else {
            $(this).hide().attr('disabled','disabled');
        }
    });
});