javascript - 无法使用 JavaScript 切换表单

标签 javascript html css

我有这个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>

这主要有 2 个表单，ID 为“cardpayment”和“internetbanking”。 我有一个 3 个单选按钮，当我选择带有 ID 的“信用卡”表格时，会显示“卡支付”。当我点击“借记卡”时，同样的表格。当我点击带有 ID 的“网上银行”表格时显示“网上银行”，隐藏“信用卡支付”表格。

我试过以下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';
        }    

    }
}

我有一个 fiddle 演示，这里有所有的细节

http://jsfiddle.net/7DCY8/

最佳答案

你的代码看起来不错，除了你应该改变

var val = this.value;

到

var val = this.id;

Here's the working fiddle.

关于javascript - 无法使用 JavaScript 切换表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20660350/

上一篇：javascript - 如何删除生成的数组中显示在下拉列表中的空白行

下一篇：html - 在 joomla 3.2 中为不同的文章页面添加不同的浏览器标题

相关文章：

javascript - 如何为网格中的每个单元格组合框编辑器定义不同的商店？

Javascript 在构造函数中将 dom 事件设置为原型(prototype)方法

javascript - 从指令的模板访问命名 Controller 的方法

html - R 解析网页中的不完整文本(HTML)

html - 我不明白我的导航栏(手机)

html - 使用加法变换风格化兄弟元素

css - 水平居中div

javascript - 手写笔:将样式添加到在 javascript 中生成的 id

html - 在 IE 中使用框架集的问题

css - 在 Windows Phone 中通过 z-index 锁定屏幕

©2024 IT工具网  联系我们