how to hide credit card fields when PayPal is selected in business catalyst checkout

Question

How to change the checkout page with simple css and/or javascript so when selecting the PayPal payment option the credit card fields hide and possibly pulls the submit button up under the PayPal button. Here is section of table code:

 <tr>
            <td>
            <input checked="checked" type="radio" name="PaymentMethodType" id="PaymentMethodType_1" value="1" /> Credit Card<br />
            <input type="radio" name="PaymentMethodType" id="PaymentMethodType_5" value="5" /> PayPal<br />
            </td>
        </tr>
        <tr>
            <td><label for="CardName">Name on Card <span class="req">*</span></label><br />
            <input type="text" name="CardName" id="CardName" class="cat_textbox" autocomplete="off" /></td>
        </tr>
         <tr>
            <td><label for="CardType">Card Type <span class="req">*</span></label><br />
            <select name="CardType" id="CardType" class="cat_dropdown">
            <option value="1">Visa</option>
            <option value="2">Mastercard</option>
            <option value="3">Discover</option>
            <option value="4">American Express</option>

            </select></td>
        </tr>
        <tr>
            <td><label for="CardNumber">Card Number <span class="req">*</span></label><br />
            <input type="text" name="CardNumber" id="CardNumber" class="cat_textbox" autocomplete="off" /></td>
        </tr>
        <tr>
            <td><label>Card Expiry <span class="req">*</span></label><br />
            <select name="CardExpiryMonth" id="CardExpiryMonth" class="cat_dropdown_smaller">
            <option value="01">01</option>
            <option value="02">02</option>
            <option value="03">03</option>
            <option value="04">04</option>
            <option value="05">05</option>
            <option value="06">06</option>
            <option value="07">07</option>
            <option value="08">08</option>
            <option value="09">09</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            </select><select name="CardExpiryYear" id="CardExpiryYear" class="cat_dropdown_smaller">
            <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>
            </select></td>
        </tr>

        <tr>
            <td><label for="CardCCV">CCV Number <span class="req">*</span></label><br />
            <input type="text" name="CardCCV" id="CardCCV" class="cat_textbox" autocomplete="off" /></td>
        </tr>
        <tr>
            <td><label for="Amount">Amount <span class="req">*</span> <span id="constraint-300-label"></span></label><br />
            <input type="text" name="Amount" id="Amount" class="cat_textbox" /></td>
        </tr>
        <tr>
            <td><input class="cat_button" type="submit" value="Submit" id="catwebformbutton" /></td>
        </tr>

Answer 1

So for a basic solution you can use jQuery to find out which input is selected, detect if it is the PayPal radio, and hide the credit card fields.

Take a look at the fiddle.

It will also show the fields if the user decided to input a credit card instead.

I wrapped the credit card tr's in a class called .credit-cards which jQuery just hides and shows this class.

Make sure to copy the html as well, as include the jQuery in your file.

PS: This is probably a duplicate question/answer.

Answer 2

Added this to script to hide CC when PayPal is selected:function ShowCCFields(val) { if (!document.getElementById('paymentdiv')) return; if (val != 1) document.getElementById('paymentdiv').style.display = 'none'; else document.getElementById('paymentdiv').style.display = 'inline'; }