CODEWITHSUNDEEP
javascripthtmlcss
user3105409
user3105409

Reputation:

Cant toggle forms using JavaScript

I have this html

<body>
  <section id="content" class="m-t-lg wrapper-md animated fadeInDown">
    <a class="nav-brand" href="index.html"></a>
    <div class="row m-n">
      <div class="col-md-4 col-md-offset-4 m-t-lg">
        <section class="panel">
          <header class="panel-heading bg bg-primary text-center">
            <div class="m-b-sm">

                <div class="btn-group" data-toggle="buttons">
                  <label class="btn btn-sm btn-success">
                    <input type="radio" name="radios" id="radio1"> <i class="icon-ok text-active"></i>Credit card
                  </label>
                  <label class="btn btn-sm btn-success">
                    <input type="radio" name="radios" id="radio2"> <i class="icon-ok text-active"></i>Debit card
                  </label>
                  <label class="btn btn-sm btn-success">
                    <input type="radio" name="radios" id="radio3"> <i class="icon-ok text-active"></i>Internet Banking
                  </label>
                </div>
              </div>





          </header>
          <form method="post" action="http://www.bjhhbhjh.com/webapp/TokenProcess.php" class="panel-body" id="cardpayment">



             <div class="form-group">
                <input type='hidden' id='ccType' name='ccType'/>
            <ul class="cards">
            <li class="visa">Visa</li>
            <li class="visa_electron">Visa Electron</li>
            <li class="mastercard">MasterCard</li>
            <li class="maestro">Maestro</li>                   
            </ul>
              </div>
            <div class="form-group">
              <label class="control-label">Card Number</label>
              <input type="text" name="ccnumber" id="ccnumber" placeholder="411111111111111" class="form-control">
            </div>
            <div class="form-group">
              <label class="control-label" style="display:inline">Expiry</label>

<select class="form-control" id="expiry_month" name="expiry_month">
<option selected>Select Month</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select class="form-control" id="expiry_year" name="expiry_year">
<option selected>Select Year</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>                          <option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
<option value="2031">2031</option>
<option value="2032">2032</option>
<option value="2033">2033</option>
<option value="2034">2034</option>
<option value="2035">2035</option>
<option value="2036">2036</option>
</select>

            </div>
            <div class="form-group">
              <label class="control-label">CVV</label>
              <input type="password" id="cvv" name="cvv" placeholder="123" class="form-control">
            </div>

         <div class="form-group">
              <label class="control-label">Amount</label>
              <input type="text" name="amount" id="amount" placeholder="100.00" class="form-control">
            </div>

         <div class="form-group">
              <label class="control-label">Name on card</label>
              <input type="text" name="name_on_card" id="name_on_card" placeholder="Enter name as on card" class="form-control">
            </div>

         <div class="form-group">
              <label class="control-label">Email</label>
              <input type="text" name="email" id="email" placeholder="Enter your Email" class="form-control">
            </div>

         <div class="form-group">
              <label class="control-label">Mobile Number</label>
              <input type="text" name="mobileNo" id="mobileNo" placeholder="Enter your mobile number" class="form-control">
            </div>
        <input type="hidden" name="merchant_id">
           <input type="hidden" name="customerReferenceNo">
              <input type="hidden" name="selectedRadioValue" id="selectedRadioValue">


            <button type="submit" class="btn btn-info">Pay Now</button>
            <div class="line line-dashed"></div>
            <p class="text-muted text-center"><small>Already have an account?</small></p>

          </form>

    <form method="post" action="http://www.bmbmnbmnb.com/webapp/IB.php" id="internetpayment" class="panel-body">



         <div class="form-group">
              <label class="control-label">Name</label>
              <input type="text" name="name" id="name" placeholder="Enter your name" class="form-control">
            </div>

          <div class="form-group">
              <label class="control-label">Email</label>
              <input type="text" name="email" id="email" placeholder="Enter your Email" class="form-control">
            </div>

         <div class="form-group">
              <label class="control-label">Mobile Number</label>
              <input type="text" name="mobileNo" id="mobileNo" placeholder="Enter your mobile number" class="form-control">
            </div>

          <label class="control-label" style="display:inline">Bank</label>

        <select class="form-control" id="BankId" name="BankId">
<option selected>Select Bank</option>
<option value="CORP">CORPORATION </option>
<option value="HDFC"> HDFC </option>
<option value="ICICI"> ICICI </option>
<option value="IDBI"> IDBI </option>
<option value="SBI"> STATE BANK OF INDIA </option>
<option value="DB"> DEUTSCHE </option>
</select>

        <div class="form-group">
              <label class="control-label">Amount</label>
              <input type="text" name="amount" id="amount" placeholder="100.00" class="form-control">
              </div>



        <input type="hidden" name="merchant_id">
           <input type="hidden" name="customerReferenceNo">
              <input type="hidden" name="selectedRadioValue" id="selectedRadioValue">

          <button type="submit" class="btn btn-info">Pay Now</button>

    </form>     

        </section>
      </div>
    </div>
  </section>
  <!-- footer -->
  <footer id="footer">
    <div class="text-center padder clearfix">
      <p>
        <small>Mobile first web app framework base on Bootstrap<br>&copy; 2013</small>
      </p>
    </div>
  </footer>


</body>

this primarly has 2 forms with ids "cardpayment" and "internetbanking". I have a 3 radio buttons in which when i select "creditcard" form with id "card payment" is shown.When I click on "debit card",again the same form.And when I click on "internet banking" form with id"internetbanking" is shown and "cardpayment" form is hidden.

I have tried the following javascript

var radios = document.getElementsByName("radios");
var cardpayment =  document.getElementById("cardpayment");
var internetpayment =  document.getElementById("internetpayment");
cardpayment.style.display = 'block';   // show
internetpayment.style.display = 'none';// hide
for(var i = 0; i < radios.length; i++) {
    radios[i].onclick = function() {
        var val = this.value;
        if(val == 'radio1' || val == 'radio2'){
            cardpayment.style.display = 'block';
            internetpayment.style.display = 'none';
        }
        else if(val == 'radio3'){
             cardpayment.style.display = 'none';
             internetpayment.style.display = 'block';
        }    

    }
}

I have a fiddle demo with all the details here

http://jsfiddle.net/7DCY8/

Upvotes: 2

Views: 159

Answers (1)

woz
woz

Reputation: 10994

Your code seems fine except you should change

var val = this.value;

to

var val = this.id;

Here's the working fiddle.

Upvotes: 1

Related Questions