title: Display HTML form, based on selection of Radio Button
body: <p>I am trying to arrange my radio buttons, so that they will display separate forms, based on which button is selected</p>
  
  <p>I already got it working.</p>
  
  <p>The problem is :  the forms are displayed "<strong>one after another</strong>".  </p>
  
  <p>Meaning :  instead of the second form displaying in place of the first, it is displayed <strong>WAY DOWN BELOW</strong>  )))))))))</p>
  
  <p>Here is the arrangement of my form-code :</p>
  
  <pre><code>   &lt;article&gt;
      &lt;fieldset&gt;
      &lt;h2 style="color:black; text-align:center; font:verdana; font-  
       size:100%"&gt;&lt;b&gt;&lt;u&gt;Pay Now&lt;/u&gt;&lt;/b&gt;&lt;/h2&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;p&gt;Please select a method of payment below :&lt;/p&gt;
          &lt;br&gt;
          &lt;form&gt;
           &lt;label&gt;&lt;input value="1" type="radio" name="formselector" 
      onclick="displayForm(this)"&gt;Via Credit Card&lt;/label&gt;
              &lt;br&gt; 
              &lt;label&gt;&lt;input value="2" type="radio" name="formselector" 
         onclick="displayForm(this)"&gt;Via Paypal&lt;/label&gt;   
          &lt;/form&gt;
  
          &lt;form style="visibility:hidden" id="ccform"&gt;&lt;label&gt;Enter your credit 
        card details :&lt;/label&gt;
              &lt;br&gt;
              &lt;br&gt;
          &lt;dd&gt;&lt;p&gt;Credit Card Name : &lt;input type="text" id="ccname" 
         name="ccname" value="$ccname"&gt;&lt;/p&gt;
                  &lt;p&gt;Credit Card Type : &lt;select name="cctype" required&gt;
                  &lt;option value="Visa"&gt;Visa&lt;/option&gt;
                  &lt;option value="Mastercard"&gt;Mastercard&lt;/option&gt;
                  &lt;option value="American Express"&gt;American Express&lt;/option&gt;
                  &lt;option value="Discover"&gt;Discover&lt;/option&gt;
                  &lt;option value="Diners Club"&gt;Diners Club&lt;/option&gt;
                  &lt;option value="Maestro"&gt;Maestro&lt;/option&gt;
                  &lt;option value="Verified By Visa"&gt;Verified By Visa&lt;/option&gt;
                  &lt;option value="Visa Electron"&gt;Visa Electron&lt;/option&gt;
                  &lt;/select&gt;
  
         &lt;p&gt;Credit Card Number : &lt;input type="text" minlength="16" 
        id="ccnumber" name="ccnumber" value="$ccnumber"&gt;&lt;/p&gt;
                  &lt;p&gt;Credit Expiry Date : Month : &lt;select 
            name="ccexpdatemonth" required&gt;
                  &lt;option value="1"&gt;1&lt;/option&gt;
                  &lt;option value="2"&gt;2&lt;/option&gt;
                  &lt;option value="3"&gt;3&lt;/option&gt;
                  &lt;option value="4"&gt;4&lt;/option&gt;
                  &lt;option value="5"&gt;5&lt;/option&gt;
                  &lt;option value="6"&gt;6&lt;/option&gt;
                  &lt;option value="7"&gt;7&lt;/option&gt;
                  &lt;option value="8"&gt;8&lt;/option&gt;
                  &lt;option value="9"&gt;9&lt;/option&gt;
                  &lt;option value="10"&gt;10&lt;/option&gt;
                  &lt;option value="11"&gt;11&lt;/option&gt;
                  &lt;option value="12"&gt;12&lt;/option&gt;
                  &lt;/select&gt;
                  &lt;span&gt;Year : &lt;select name="ccexpdateyear" required&gt;
                  &lt;option value="2015"&gt;2015&lt;/option&gt;
                  &lt;option value="2016"&gt;2016&lt;/option&gt;
                  &lt;option value="2017"&gt;2017&lt;/option&gt;
                  &lt;option value="2018"&gt;2018&lt;/option&gt;
                  &lt;option value="2019"&gt;2019&lt;/option&gt;
                  &lt;option value="2020"&gt;2020&lt;/option&gt;
                  &lt;option value="2021"&gt;2021&lt;/option&gt;
                  &lt;/select&gt;&lt;/span&gt;
          &lt;p&gt;Credit Card CVC : &lt;input type="text" minlength="3" id="cccvc" 
         name="cccvc" value="$cccvc"&gt;&lt;/p&gt;
              &lt;/dd&gt;   
              &lt;/form&gt;
              &lt;form style="visibility:hidden" id="paypalform"&gt;&lt;label&gt;Enter 
          your Paypal Details&lt;/label&gt;
              &lt;br&gt;
              &lt;br&gt;
              &lt;dd&gt;Paypal Address : &lt;input type="text" id="paypal" 
         name="paypal" value="$paypal"&gt;&lt;/dd&gt;
              &lt;/form&gt; 
  
                      &lt;br&gt;
          &lt;div id="float_right"&gt;
          &lt;input type="submit" name="submit3" value="Pay Now"&gt;
          &lt;/div&gt;
      &lt;/fieldset&gt;
      &lt;/article&gt;  
  </code></pre>
  
  <p>Actually, my ideal solution would be to have each form displayed directly beneath its own radio-button.</p>
  
  <p>How can I re-arrange my code, to make this happen?</p>
  
  <p>Thanks</p>
  
  <p>My JS function :</p>
  
  <pre><code>  &lt;script type="text/javascript"&gt; 
          function displayForm(c){ 
              if(c.value == "1"){ 
  
       document.getElementById("ccform").style.visibility='visible'; 
       document.getElementById("paypalform").style.visibility='hidden'; 
              } 
              else if(c.value =="2"){ 
                  document.getElementById("ccform").style.visibility='hidden'; 
  
        document.getElementById("paypalform").style.visibility='visible'; 
              } 
              else{ 
              } 
           }         
      &lt;/script&gt;  
  </code></pre>