title: Show form based on radio button select
body: <p>I have the following html which has two forms with form <code>id=cardpayment</code> for first form and form <code>id="intenetpayment"</code> for the second.</p>
  
  <p>Also I have 3 radio buttons named "Debit card","Credit Card","Internet Banking".</p>
  
  <p>All I want to do is,when I select the radio button Debitcard or Credit card,form with <code>id="cardpayment"</code> should be shown and the other form should be hidden and when i click on Internetbanking radio button , form with <code>id="cardpayment"</code> should be hidden and form with <code>id="internetpayment"</code> should be shown. Im new to jquery and javascript.I checked online that this can be done using a css by adding/removing a css class </p>
  
  <pre><code>{
  display:none;
  }
  </code></pre>
  
  <p>But i dont know how to make it work using javascript.</p>
  
  <p>You can find the fiddle at  <a href="http://jsfiddle.net/d5qDb/1/" rel="nofollow">http://jsfiddle.net/d5qDb/1/</a></p>
  
  <p>Pardon for the long question,and I havnt included the css here for not confusing the question.It is in the fiddle anyway.thanks in advance for any help.I have given the division to two forms below.</p>
  
  <pre><code> &lt;body&gt;
          &lt;div id="credit-card"&gt;
              &lt;header&gt;
                             &lt;span class="title" style="background-image: url('images/fethrpowered.png');"&gt;&lt;strong&gt;Card Payment:&lt;/strong&gt; Enter payment details&lt;/span&gt;
                  &lt;a href="#"&gt;&lt;span class="close"&gt;&lt;img src="images/close.png"/&gt;&lt;/span&gt;&lt;/a&gt;
  
  
  
              &lt;/header&gt;
              &lt;section id="content"&gt;
                                  &lt;div class="title"&gt;&lt;strong&gt;Payment Mode- Select your payment mode&lt;/strong&gt;&lt;/div&gt;
  
           &lt;input type="radio" id="radio1" name="radios" value="all" checked&gt;
         &lt;label for="radio1"&gt;Credit Card&lt;/label&gt;
  
      &lt;input type="radio" id="radio2" name="radios"value="false"&gt;
         &lt;label for="radio2"&gt;Debit Card&lt;/label&gt;
  
          &lt;input type="radio" id="radio3" name="radios"value="false"&gt;
         &lt;label for="radio3"&gt;Internet Banking&lt;/label&gt;
  
                  &lt;form method="post" id="cardpayment"&gt;
  
  
  
          &lt;div style="float:right;margin-top:50px;"&gt;
           &lt;input type='hidden' id='ccType' name='ccType' /&gt;
                  &lt;ul class="cards"&gt;
                  &lt;li class="visa"&gt;Visa&lt;/li&gt;
                  &lt;li class="visa_electron"&gt;Visa Electron&lt;/li&gt;
                  &lt;li class="mastercard"&gt;MasterCard&lt;/li&gt;
                  &lt;li class="maestro"&gt;Maestro&lt;/li&gt;                   
                  &lt;/ul&gt;
          &lt;/div&gt;
  
          &lt;div class="table form-fields"&gt;                   
       &lt;div class="row"&gt;
              &lt;div class="label"&gt;Card Number:&lt;/div&gt;
                              &lt;div class="input full"&gt;&lt;input type="text" name="ccnumber" id="ccnumber" placeholder="8763125487533457"/&gt;&lt;br/&gt;&lt;/div&gt;
  
  
      &lt;/div&gt;
  
  
                          &lt;div class="row"&gt;
                              &lt;div class="label"&gt;Card Type:&lt;/div&gt;
                              &lt;div class="input full"&gt;
                                  &lt;select class="styled"&gt;
                                      &lt;option selected&gt;Visa&lt;/option&gt;
                                      &lt;option&gt;Mastercard&lt;/option&gt;
                                      &lt;option&gt;Maestro&lt;/option&gt;
                                      &lt;option&gt;SBI Maestro&lt;/option&gt;
                                  &lt;/select&gt;
                              &lt;/div&gt;
                              &lt;div class="valid"&gt;&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="row"&gt;
                                                      &lt;div class="label"&gt;Your name:&lt;/div&gt;
                              &lt;div class="input full"&gt;&lt;input type="text" name="name" id="name" placeholder="Mr. Personality of TV"/&gt;&lt;/div&gt;
  
  
                          &lt;/div&gt;
                          &lt;div class="row name"&gt;
                              &lt;div class="label"&gt;Expires On:&lt;/div&gt;
                              &lt;div class="input size50"&gt;
                                  &lt;select class="styled"&gt;
      &lt;option selected&gt;Select Month&lt;/option&gt;
      &lt;option value="01"&gt;January&lt;/option&gt;
      &lt;option value="02"&gt;February&lt;/option&gt;
      &lt;option value="03"&gt;March&lt;/option&gt;
      &lt;option value="04"&gt;April&lt;/option&gt;
      &lt;option value="05"&gt;May&lt;/option&gt;
      &lt;option value="06"&gt;June&lt;/option&gt;
      &lt;option value="07"&gt;July&lt;/option&gt;
      &lt;option value="08"&gt;August&lt;/option&gt;
      &lt;option value="09"&gt;September&lt;/option&gt;
      &lt;option value="10"&gt;October&lt;/option&gt;
      &lt;option value="11"&gt;November&lt;/option&gt;
      &lt;option value="12"&gt;December&lt;/option&gt;
                                  &lt;/select&gt;
          &lt;select class="styled"&gt;
      &lt;option selected&gt;Select Year&lt;/option&gt;
      &lt;option value="2012"&gt;2012&lt;/option&gt;
      &lt;option value="2013"&gt;2013&lt;/option&gt;
      &lt;option value="2014"&gt;2014&lt;/option&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;option value="2022"&gt;2022&lt;/option&gt;
      &lt;option value="2023"&gt;2023&lt;/option&gt;
      &lt;option value="2024"&gt;2024&lt;/option&gt;
      &lt;option value="2025"&gt;2025&lt;/option&gt;
      &lt;option value="2026"&gt;2026&lt;/option&gt;                          &lt;option value="2027"&gt;2027&lt;/option&gt;
      &lt;option value="2028"&gt;2028&lt;/option&gt;
      &lt;option value="2029"&gt;2029&lt;/option&gt;
      &lt;option value="2030"&gt;2030&lt;/option&gt;
      &lt;option value="2031"&gt;2031&lt;/option&gt;
      &lt;option value="2032"&gt;2032&lt;/option&gt;
      &lt;option value="2033"&gt;2033&lt;/option&gt;
      &lt;option value="2034"&gt;2034&lt;/option&gt;
      &lt;option value="2035"&gt;2035&lt;/option&gt;
      &lt;option value="2036"&gt;2036&lt;/option&gt;
      &lt;/select&gt;   
  
                              &lt;/div&gt;
                              &lt;div class="valid"&gt;&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="row name"&gt;
                              &lt;div class="label"&gt;CVV Number:&lt;/div&gt;
                              &lt;div class="input size50"&gt;&lt;input type="text" name="cvv" id="cvv" placeholder="490" maxlength="3"/&gt;&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;input type="submit" style="float:right" value="Pay Now"/&gt;
                  &lt;/form&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>        &lt;form method="post" id="internetpayment"&gt;
  
  
          &lt;div class="table form-fields"&gt;     
  
              &lt;div class="row name"&gt;
                              &lt;div class="label"&gt;Name:&lt;/div&gt;
                              &lt;div class="input full"&gt;&lt;input type="text" name="name" id="Name" placeholder="Enter your name"/&gt;&lt;/div&gt;
                          &lt;/div&gt;
  
              &lt;div class="row name"&gt;
                              &lt;div class="label"&gt;Email:&lt;/div&gt;
                              &lt;div class="input full"&gt;&lt;input type="text" name="email" id="email" placeholder="Enter Email address"/&gt;&lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;div class="row name"&gt;
                      &lt;div class="label"&gt;Mobile Number:&lt;/div&gt;
                              &lt;div class="input size50"&gt;&lt;input type="text" name="Mobile Number" id="mobileNo"/&gt;&lt;/div&gt;
  
  
                          &lt;/div&gt;
                          &lt;div class="row name"&gt;
                              &lt;div class="label"&gt;Bank:&lt;/div&gt;
                              &lt;div class="input size50"&gt;
  
       &lt;select name="BankId" class="styled" data-required="true" data-trigger="change"&gt;
                          &lt;option value="CORP"&gt;Corporation &lt;/option&gt;
                          &lt;option value="HDFC"&gt; HDFC &lt;/option&gt;
                          &lt;option value="ICICI"&gt; ICICI &lt;/option&gt;
                          &lt;option value="IDBI"&gt; IDBI &lt;/option&gt;
                          &lt;option value="SBI"&gt; STATE BANK OF INDIA &lt;/option&gt;
                          &lt;option value="DB"&gt; DEUTSCHE &lt;/option&gt;
                  &lt;/select&gt;
  
  
                              &lt;/div&gt;
                              &lt;div class="valid"&gt;&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="row name"&gt;
                              &lt;div class="label"&gt;Amount:&lt;/div&gt;
                              &lt;div class="input size50"&gt;&lt;input type="text" name="amount" id="amount" placeholder="10.00"/&gt;&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;input type="submit" style="float:right" value="Pay Now"/&gt;
                  &lt;/form&gt;
  
  
  
  
              &lt;/section&gt;
  
          &lt;/div&gt;
  
  
      &lt;/body&gt;
  </code></pre>