Show hide fields based on radio button selection

JavaScript
1

Hi everyone,

I have the code (below) on a web payment form that I’m creating. There are 3 checkboxes under the “Payment Method” label, ie. Credit Card, Pay Offline and Pay Pal. I’d like to have PayPal check by default and to have all the credit card fields below hidden until someone clicks the credit credit card radio button, at which point the credit card fields would be revealed. If someone then clicks either Paypal or Pay Offline then the credit card fields would disappear again.

I wondered if someone could tell me how to do this? Not sure if Javascript of J-query would be needed.

Really appreciate any help.


    <span class="req">*</span>  Required
    <table class="webform" cellspacing="0" cellpadding="2" border="0">
        <tbody>
            <tr>
                <td><label for="Title">Title</label><br />
                <select name="Title" id="Title" class="cat_dropdown_smaller">
                <option value="913142">Dr</option>
                <option value="913141">Miss</option>
                <option value="913138" selected="selected">Mr</option>
                <option value="913139">Mrs</option>
                <option value="913140">Ms</option>
                </select></td>
            </tr>
            <tr>
                <td><label for="FirstName">First Name <span class="req">*</span></label><br />
                <input type="text" name="FirstName" id="FirstName" class="cat_textbox" maxlength="255" /> </td>
            </tr>
            <tr>
                <td><label for="LastName">Last Name <span class="req">*</span></label><br />
                <input type="text" name="LastName" id="LastName" class="cat_textbox" maxlength="255" /> </td>
            </tr>
            <tr>
                <td><label for="EmailAddress">Email Address <span class="req">*</span></label><br />
                <input type="text" name="EmailAddress" id="EmailAddress" class="cat_textbox" maxlength="255" /> </td>
            </tr>
            <tr>
                <td><label>Payment Method <span class="req">*</span></label><br />
                <input checked="checked" type="radio" name="PaymentMethodType" id="PaymentMethodType_1" value="1" />Credit Card<br />
                <input type="radio" name="PaymentMethodType" id="PaymentMethodType_3" value="3" />Pay Offline<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="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="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>
                </select></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="4">American Express</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" value="145.00" readonly="readonly" /></td>
            </tr>
            <tr>
                <td><input class="cat_button" type="submit" value="Submit" id="catwebformbutton" /></td>
            </tr>
        </tbody>
    </table>
    <script type="text/javascript" src="/CatalystScripts/ValidationFunctions.js"></script>
    <script type="text/javascript">
//<![CDATA[
var submitcount86036 = 0;function checkWholeForm86036(theForm){var why = "";if (theForm.FirstName) why += isEmpty(theForm.FirstName.value, "First Name"); if (theForm.LastName) why += isEmpty(theForm.LastName.value, "Last Name"); if (theForm.EmailAddress) why += checkEmail(theForm.EmailAddress.value); if (theForm.PaymentMethodType) why += checkSelected(theForm.PaymentMethodType, "Payment Method");if (!theForm.PaymentMethodType || getRadioSelected(theForm.PaymentMethodType) == 1) { if (theForm.CardName) why += isEmpty(theForm.CardName.value, "Name on Card"); if (theForm.CardNumber) why += isNumeric(theForm.CardNumber.value, "Card Number"); if (theForm.Amount) why += isCurrency(theForm.Amount.value, "Amount"); } if(why != ""){alert(why);return false;}if(submitcount86036 == 0){submitcount86036++;theForm.submit();return false;}else{alert("Form submission is in progress.");return false;}}
//]]>
</script>
</form>
2

using jQuery will be more easier to implement this functionality

Shall i give you an example with your form?

3

I would really like an example - thanks so much.

4

I don’t know how expensive in using parents method in jQuery, this one way of achieving your required result

        <span class="req">*</span>  Required
    <table class="webform" cellspacing="0" cellpadding="2" border="0">
        <tbody>
            <tr>
                <td><label for="Title">Title</label><br />
                <select name="Title" id="Title" class="cat_dropdown_smaller">
                <option value="913142">Dr</option>
                <option value="913141">Miss</option>
                <option value="913138" selected="selected">Mr</option>
                <option value="913139">Mrs</option>
                <option value="913140">Ms</option>
                </select></td>
            </tr>
            <tr>
                <td><label for="FirstName">First Name <span class="req">*</span></label><br />
                <input type="text" name="FirstName" id="FirstName" class="cat_textbox" maxlength="255" /> </td>
            </tr>
            <tr>
                <td><label for="LastName">Last Name <span class="req">*</span></label><br />
                <input type="text" name="LastName" id="LastName" class="cat_textbox" maxlength="255" /> </td>
            </tr>
            <tr>
                <td><label for="EmailAddress">Email Address <span class="req">*</span></label><br />
                <input type="text" name="EmailAddress" id="EmailAddress" class="cat_textbox" maxlength="255" /> </td>
            </tr>
            <tr>
                <td><label>Payment Method <span class="req">*</span></label><br />
                <input type="radio" name="PaymentMethodType" id="PaymentMethodType_1" value="1" />Credit Card<br />
                <input type="radio" name="PaymentMethodType" id="PaymentMethodType_3" value="3" />Pay Offline<br />
                <input checked="checked" 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="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="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>
                </select></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="4">American Express</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" value="145.00" readonly="readonly" /></td>
            </tr>
            <tr>
                <td><input class="cat_button" type="submit" value="Submit" id="catwebformbutton" /></td>
            </tr>
        </tbody>
    </table>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script type="text/javascript">
    var card_name_tr, card_number_tr, card_expiry_month_tr, card_type_tr, card_cvv_tr;

    $(document).ready(function() {
    	card_name_tr = $("#CardName").parents('tr');
    	card_number_tr = $("#CardNumber").parents('tr');
    	card_expiry_month_tr = $("#CardExpiryMonth").parents('tr');
    	card_type_tr = $("#CardType").parents('tr');
    	card_cvv_tr = $("#CardCCV").parents('tr');

    	showCreditCardFields(0);

    	$("input[name='PaymentMethodType']").change(function() {
    		if ($(this).val() == '1') {
    			showCreditCardFields(1);
    		}
    		else {
    			showCreditCardFields(0);
    		}
    	});
    });

    function showCreditCardFields(show) {
    	if (show) {
    		card_name_tr.show();
    		card_number_tr.show();
    		card_expiry_month_tr.show();
    		card_type_tr.show();
    		card_cvv_tr.show();
    	}
    	else {
    		card_name_tr.hide();
    		card_number_tr.hide();
    		card_expiry_month_tr.hide();
    		card_type_tr.hide();
    		card_cvv_tr.hide();
    	}
    }
    </script>
    <script type="text/javascript" src="/CatalystScripts/ValidationFunctions.js"></script>
    <script type="text/javascript">
//<![CDATA[
var submitcount86036 = 0;
function checkWholeForm86036(theForm){var why = "";if (theForm.FirstName) why += isEmpty(theForm.FirstName.value, "First Name"); if (theForm.LastName) why += isEmpty(theForm.LastName.value, "Last Name"); if (theForm.EmailAddress) why += checkEmail(theForm.EmailAddress.value); if (theForm.PaymentMethodType) why += checkSelected(theForm.PaymentMethodType, "Payment Method");if (!theForm.PaymentMethodType || getRadioSelected(theForm.PaymentMethodType) == 1) { if (theForm.CardName) why += isEmpty(theForm.CardName.value, "Name on Card"); if (theForm.CardNumber) why += isNumeric(theForm.CardNumber.value, "Card Number"); if (theForm.Amount) why += isCurrency(theForm.Amount.value, "Amount"); } if(why != ""){alert(why);return false;}if(submitcount86036 == 0){submitcount86036++;theForm.submit();return false;}else{alert("Form submission is in progress.");return false;}}
//]]>
</script>
</form>
5

Thanks so much for the code. I’ll give it a test. I really appreciate your help.