How to get selected radio button to display specific hidden div after clicking submit?

0
votes

I currently have three radio buttons. I would like the selected radio button to trigger a pop-up div once the submit button is clicked.

I originally had an "onclick" jQuery function to popup the corresponding div when the radio button was selected, but I am not sure how to build this into the form with the submit button instead...

My 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>

My jQuery code

// Credit Card Div Popup

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

// Bank Account Div Popup

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

2 Answers

1
votes

I think this does what you want:

$('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;
  }
});

It shows the appropriate div based on the id of the checked input.

Snippet

$(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>
0
votes

Try with:

$("#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;

}

});