Home/ Questions/Q 6970733
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T16:44:52+00:00

I would like to build something like this: at start an empty page with

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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?

    • 0