單擊提交后如何獲取選定的單選按鈕以顯示特定的隱藏div？

Question

我目前有三個單選按鈕。 我希望選定的單選按鈕一旦單擊提交按鈕即可觸發彈出式div。

當選擇單選按鈕時，我最初有一個“ onclick” jQuery函數來彈出相應的div，但是我不確定如何使用Submit按鈕將其構建到表單中。

我的html：

// Radio button html code
<label>
    <input type="radio" name="pmt-type" id="bank">Bank Account Information (ACH)
</label>
<label>
    <input type="radio" name="pmt-type" id="cc"> Credit Card, Debit Card, Health Savings Account (HSA) or Financial Savings Account (FSA)
</label>
<label>
    <input type="radio" name="pmt-type" id="later"> I'll just deal with it later
</label>
<input type="submit">  

// Hidden bank account div that should appear on submit if corresponding radio button is selected
<div id="bank-act-popup">
    <h2>Please enter your bank account information:</h2>
    <hr width="430px" class="center-hr"></hr>
    <br>
            <input type="text" name="routing" placeholder="Routing Number"><br>
            <input type="text" name="act-num" placeholder="Account Number"/><br>
            <input type="text" name="bank-name" placeholder="Bank Name"/><br>
        <br><br>
            <a class="btn" href="/payment/step9">Submit</a>
</div>

// Hidden credit card div that should appear on submit if corresponding radio button is selected
<div id="credit-card-popup">
    <h2>Please enter your credit card information:</h2>
    <hr width="430px" class="center-hr"></hr>
    <div class='card-wrapper'></div>
    <br>
        <form>
            <input type="text" name="number" placeholder="Card Number"><br>
            <input type="text" name="name" placeholder="Full Name"/><br>
            <input type="text" name="expiry" placeholder="Expiration Date"/><br>
            <input type="text" name="cvc" placeholder="CVC"/>
        </form>
</div>

我的jQuery代碼

// Credit Card Div Popup

$(document).ready(function(){
    $("#credit-card-popup").hide();
});

// Bank Account Div Popup

$(document).ready(function(){
    $("#bank-act-popup").hide();
});

Answer 1

我認為這可以滿足您的需求：

$('input[type="submit"]').click(function() {
  $("#credit-card-popup, #bank-act-popup").hide();

  switch($('input[name="pmt-type"]:checked').attr('id')) {
    case 'bank': $('#bank-act-popup').show();
                 break;
    case 'cc'  : $('#credit-card-popup').show();
                 break;
  }
});

它根據檢查的input的id顯示適當的div 。

片段

 $(function() { $('input[type="submit"]').click(function() { $("#credit-card-popup, #bank-act-popup").hide(); switch($('input[name="pmt-type"]:checked').attr('id')) { case 'bank': $('#bank-act-popup').show(); break; case 'cc' : $('#credit-card-popup').show(); break; } }); }); 

 label { display: block; } #credit-card-popup, #bank-act-popup { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label> <input type="radio" name="pmt-type" id="bank">Bank Account Information (ACH) </label> <label> <input type="radio" name="pmt-type" id="cc">Credit Card, Debit Card, Health Savings Account (HSA) or Financial Savings Account (FSA) </label> <label> <input type="radio" name="pmt-type" id="later">I'll just deal with it later </label> <input type="submit"> <div id="bank-act-popup"> <h2>Please enter your bank account information:</h2> <hr width="430px" class="center-hr"></hr> <br> <input type="text" name="routing" placeholder="Routing Number"><br> <input type="text" name="act-num" placeholder="Account Number"/><br> <input type="text" name="bank-name" placeholder="Bank Name"/><br> <br><br> <a class="btn" href="/payment/step9">Submit</a> </div> <div id="credit-card-popup"> <h2>Please enter your credit card information:</h2> <hr width="430px" class="center-hr"></hr> <div class='card-wrapper'></div> <br> <form> <input type="text" name="number" placeholder="Card Number"><br> <input type="text" name="name" placeholder="Full Name"/><br> <input type="text" name="expiry" placeholder="Expiration Date"/><br> <input type="text" name="cvc" placeholder="CVC"/> </form> </div> 

Answer 2

嘗試：

$("#bank-act-popup").hide();

$("#credit-card-popup").hide();

$(document).on('click', 'input[name=pmt-type]', function(event) {

var v = event.currentTarget.attributes.id.value;
   switch (v) {
   case 'bank':
     $("#bank-act-popup").toggle("slow");
     $("#credit-card-popup").hide('slow');
     break;
     case 'cc':
      $("#credit-card-popup").toggle("slow");
      $("#bank-act-popup").hide('slow');
     break;
     default:
      $("#bank-act-popup").hide('slow');
      $("#credit-card-popup").hide('slow');
     break;

}

});