CODEWITHSUNDEEP
htmlcssformsradio-button
OverStack
OverStack

Reputation: 767

Select between two different forms

I would like to build something like this: at start an empty page with only two radiobuttons. Lets say

<input type="radio" name=myradio value="1">one
<input type="radio" name=myradio value="2">two

There are also two forms

<form name="form1" action="..." method="post">     
    <input.../>
    <input type ="submit"/>
</form>

<form name="form2" action="..." method="post">     
    <input.../>
    <input type ="submit"/>
</form>

But at the start I dont want to show them! Only if the user is selecting one the radiobuttons. If the user goes "one" then show up form1 if the user is on "two" show up form2. Any ideas?

Ahm there is something else. If the user is changing between the two form, can I add some "cool" effects? You know not only make the on invisible and show up the other one. Something with more effects. Maybe at change make the one slowly invisible and then show up the other one slowly too? Some CSS3 options for that? Thank you

Upvotes: 1

Views: 3164

Answers (2)

Derk Arts
Derk Arts

Reputation: 3460

For starters, hide one of the forms with style='display:none'

Then write a script toggles the visibility of the forms on the onChange event of the radio buttons. I agree jQuery would make this very easy: jQuery toggle div with radio buttons

Also, with jQuery its easy to make those 'cool' effects.

Without jQuery, check this example, not the most beautiful way, but functional:

<script type="text/javascript"> 
function toggle(theform) { 
    document.getElementById("form1").style.display = "none"; 
    document.getElementById("form2").style.display = "none"; 
    document.getElementById(theform).style.display = "block"; 
} 
</script> 

<body>

<form name="form1" id='form1' action="..." method="post" >     
    <input />
    <input type ="submit"/>
</form>

<form name="form2" action="..." method="post" style="display: none;">     
    <input />
    <input type ="submit"/>
</form>


<input type="radio" name="myradio" value="1" onclick="toggle('form1');"/>one
<input type="radio" name="myradio" value="2" onclick="toggle('form2');" />two

Do you understand how this works or do you need some explanation?

Upvotes: 3

user1106352
user1106352

Reputation:

Use onclick with a toggle javascript. The onclick will toggle the visibility. The javascript will actually perform the toggle, and the style="display: none;" actually hides it until the toggle is performed.

so for instance the html

<input type="radio" name=myradio value="1" onclick="toggle_visibility('form1');">one
<input type="radio" name=myradio value="2" onclick="toggle_visibility('form2');">two

<form id="form1" action="..." method="post"  style="display: none;">     
    <input.../>
    <input type ="submit"/>
</form>

<form id="form2" action="..." method="post"  style="display: none;">     
    <input.../>
    <input type ="submit"/>
</form>

and the javascript in the header

 <script type="text/javascript">
        function toggle_visibility(id) {
           var e = document.getElementById(id);
           if(e.style.display == 'block')
              e.style.display = 'none';
           else
              e.style.display = 'block';
        }
</script>

Upvotes: 1

Related Questions