how to switch/choose between html forms

Question

Hello,

I have a little problem, and an need your profesisonal...

So i have two forms in two div. DIV ID=A and DIV ID=B

When a user visit my site, a would like to offer the visitor to choose between the forms. he user see a drop down box, or two radio button, and if select option A then form A load, if B...then B..

But i don't know how to do this, and what is the best practise to do this? May i use simple html, and after choose redirect to a subpage like formA.php and formB.php? Or use Jquery and simple hide and show the needed div?

What do ya suggest? And how im a do that?

Than you.

Answer 1

Jquery or similiar would be the most elegant imo. something like

<script type="text/javascript">
$(document).ready(function() {
    // hide the forms when page is ready
    $('#a').hide();
    $('#b').hide();

    $('#button1').click(function(){ 
        $('#a').show(); 
    });
    $('#button2').click(function(){ 
        $('#b').show(); 
    });
});
</script>

hide the forms, have 2 buttons (can be styled divs),. then when they are clicked, show the respective HTML form.

could be extended to "toggle" the forms, or only allow 1 to be selected.

problems may occur if JS is disabled however (both forms will be visible)

Answer 2

You can easily use a drop down to select the correct form. Here's an example

<!-- Forms HTML -->
<div id="form-A">
    ... html form here ....
</div>
<div id="form-B">
    ... another html form here ....
</div>

<!-- Hide forms initially with Javascript (visible for non Javascript users) -->
<script type="text/javascript">
    $("#form-A, #form-B").hide();
</script>

<!-- A dropdown to select a value -->
<select id="choose-form">
    <option>Please choose...</option>
    <option value="form-A">Some form</option>
    <option value="form-B">Another form</option>
</select>

<!-- and some simple jQuery -->
<script type="text/javascript">
    $(document).ready(function() {
        $("#choose-form").change(function() {

            //Hide -other- visible forms
            $("#form-A, #form-B").hide();
            $("#" + $(this).val()).show();
        });
    });
</script>

Answer 3

I would use jQuery as described by Ross then as you suggest yourself, if Javascript is turned off redirect them according to their choice.