Jquery do show table dependant on radio button selected

Question

I have a form with three radio buttons. When one of the radio buttons is selected I have another table show on the form. The validation is not updating properly. It should only show the validation for the table that is shown. If the payment table isn't displayed I do not want to validate the fields.

<script type="text/javascript">

$(document).ready(function() {
    $('input[name="group1"]').change(function(){
        if ($(this).val() == "charge")
        {
            $('#charge').css('display', 'inline');
        }
        else
        {
            $('#charge').css('display', 'none');
        }
    });
});*/
</script> 


<form name="contact_form" method="post" action="">

    <table border="0">
        <tr>
            <td style="width: 100px" >First Name *:</td>
            <td colspan="2"><input id="fname" name="fname" type="text" size="30" /></td>
        </tr>


        <tr>
            <td>Select An Option:</td>
            <td>
                <div >
                    <!--select id="selection" name="selection" size="1" onchange="display(this,'charge');" style="width: 260px;"/-->
<!--                    <input id="selection" name="selection" size="1" style="width: 216px"/>--> 
<!--                        <option value="" selected="selected"></option> -->
                        <input id="selection" type="radio" name="group1"  value="charge" >Please register me for the event & sign me up for the special-priced demo kit of CDN$269  *Special pricing only available until October 23rd.</option></br>
                        <input id="selection" type="radio" name="group1" value="Already Own Devices">Please simply register me for the event, as I already own a UCM6100 series IP PBX & Grandstream IP phone and will be brining both of them to the training.</option><br/>    
                        <input id="selection" type="radio" name="group1" value="Purchase Demo Kit On-Site" >Please simply register me for the event, and I will purchase the demo kit on-site, for CDN$309  </option><br/>  
<!--                    </select> -->
                </div>
            </td>
        </tr>
    </table>

    <table id="charge" style="display:none;" border="0">
        <tr>
            <td style="padding-top:1em; padding-bottom:1em;" colspan="2"><strong>Billing Info</strong>(**If you wish to buy the UCM6102 IP PBX Appliance and GXP1405 IP Phone that 
                                              you will use during the workshop, submit your credit card information below)
            </td>
        </tr>

        <tr>
            <td>Credit Card Type:</td>
            <td>
                <div>
                    <select id="cctype" name="cctype" style="width: 216px" size="1"> 
                        <option value="" selected="selected"></option>
                        <option value="visa" >Visa</option>
                        <option value="master" >Mastercard</option>
                        <option value="discover" >Discover</option>
                        <option value="amex" >American Express</option>
                    </select>
                </div>
            </td>
        </tr>

        <tr>
            <td>Credit Card Number:</td>
            <td colspan="2"><input id="ccnumber" name="ccnumber" type="text" style="width: 211px" size="19" /></td>
        </tr>

        <tr>
            <td>CC Exp Date(MM/YYYY):</td>
            <td colspan="2"><input id="ccdate" name="ccdate" type="text" style="width: 211px" size="10" /></td>
        </tr>

        <tr>
            <td>Name as appeared <br/> on Credit Card *:</td>
            <td colspan="2"><input id="ccname" name="ccname" type="text" size="30" /></td>
        </tr>

        <tr>
            <td>Billing Address *:</td>
            <td colspan="2"><input id="billadd" name="billadd" type="text" size="30" /></td>
        </tr>

        <tr>
            <td>City *:</td>
            <td colspan="2"><input id="billcity" name="billcity" type="text" size="30" /></td>
        </tr>

        <tr>
            <td>State *:</td>
            <td colspan="2"><input id="billstate" name="billstate" type="text" style="width: 211px" size="12" /></td>
        </tr>

        <tr>
            <td>Zip *:</td>
            <td colspan="2"><input id="billzip" name="billzip" type="text" style="width: 211px" size="10" /></td>
        </tr>

        <tr>
            <td style="padding-top:1em" colspan="2">
                <input id="Checkbox1" type="checkbox" />By checking this box, Gentek Marketing Inc. 
                is permitted to charge my credit card CND$299 to cover my registration for the 
                UCM6100 series IP PBX Workshop at Toronto.<br />
            <td>
        </tr>
    </table>

    <table>
        <tr>
            <td align="left"><input type="reset" name="reset" value="Reset"/></td>
            <td style="width: 271px"></td>
            <td align="right"><input type="submit" name="Submit" value="Submit" id="btn-submit"></td>
        </tr>
    </table>
</form>
<?php  } 
    else { ?>
        <form name="contact_form" method="post" action="">
    <table border="0">
        <tr>
        <td><br/> </td>
        </tr>
        <tr>
            <td><span class="full">Registration Closed</span></td>
        </tr>
    </table>
</form> 
<?php  } ?>
<div id="errors"></div>

<script type="text/javascript">
    $('#btn-submit').click(function() {
        $('.error').hide();

        var hasError = false;
        var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
        var datePattern = /^((0[1-9])|(1[0-2]))\/((20[1-4][0-9]))$/;


    //validate name
    if (($("#fname").val() == '') || ($("#lname").val() == '')) {
      $("#errors").after('<span class="error">Please enter your full name.</span>');
      hasError = true;
    }

    //validate email
    var emailaddressVal = $("#mail").val();
    if(emailaddressVal == '') {
      $("#errors").after('<span class="error">Please enter your email address.</span>');
      hasError = true;
    }
    else if(!emailReg.test(emailaddressVal)) {
      $("#errors").after('<span class="error">Enter a valid email address.</span>');
      hasError = true;
    }

    //validate phone number
    if ($("#phone").val() == '') {
      $("#errors").after('<span class="error">Please enter your phone number.</span>');
      hasError = true;
    }

    //validate session
    if (($("#session").val() == '') || ($("#iama").val() == 'Please Select a Session')) {
      $("#errors").after('<span class="error">Please select a session.</span>');
      hasError = true;
    }

    //validate I ama
    if ( ($("#iama").val() == '') ) {
      $("#errors").after('<span class="error">Please select a type.</span>');
      hasError = true;
    }

    if ( ($("#selection").val() == '') ) {
        $("#errors").after('<span class="error">Please select an option.</span>');
        hasError = true;
     }

    if ( ($("#selection").val() == 'charge') ) {
        //validate cctype
        if ( ($("#cctype").val() == '') ) {
          $("#errors").after('<span class="error">Please select a credit card type.</span>');
          hasError = true;
        }

        //validate ccnumber
        if ( ($("#ccnumber").val() == '') ) {
          $("#errors").after('<span class="error">Please enter a credit card number.</span>');
          hasError = true;
        }
        var emailaddressVal = $("#mail").val();
        if(emailaddressVal == '') {
          $("#errors").after('<span class="error">Please enter your email address.</span>');
          hasError = true;
        }
        else if(!emailReg.test(emailaddressVal)) {
          $("#errors").after('<span class="error">Enter a valid email address.</span>');
          hasError = true;
        }
        //validate ccdate
        var ccdate = $("#ccdate").val();
        if ( ccdate == '') {
          $("#errors").after('<span class="error">Please enter a date</span>');
          hasError = true;
        }
        else if(!datePattern.test(ccdate)) {
            $("#errors").after('<span class="error">Enter a valid date.</span>');
            hasError = true;
          }

        //validate ccname
        if ( ($("#ccname").val() == '') ) {
          $("#errors").after('<span class="error">Please enter a name</span>');
          hasError = true;
        }

        //validate billadd
        if ( ($("#billadd").val() == '') ) {
          $("#errors").after('<span class="error">Please enter a billing address</span>');
          hasError = true;
        }

        //validate billcity
        if ( ($("#billcity").val() == '') ) {
          $("#errors").after('<span class="error">Please enter a billing city</span>');
          hasError = true;
        }

       // validate billstate
        if ( ($("#billstate").val() == '') ) {
          $("#errors").after('<span class="error">Please enter a billing state</span>');
          hasError = true;
        }

        //validate billzip
        if ( ($("#billzip").val() == '') ) {
          $("#errors").after('<span class="error">Please enter a billing zip</span>');
          hasError = true;
        }

        //validate Checkbox1
        if ( $("#Checkbox1").attr('checked') == false ) {
          $("#errors").after('<span class="error">You must agree to the terms and conditions.</span>');
          hasError = true;
        }
        if(hasError == true) { return false; }
    }

    if(hasError == true) { return false; }

    });


</script>

I had to change the validation to:

if ( ($("#selection").attr('checked') == false ) ) {
    $("#errors").after('<span class="error">Please select an option.</span>');
    hasError = true;
 }

if ( ($("#selection").attr('checked') == true ) ) {
    //validate cctype
    if ( ($("#cctype").val() == '') ) {
      $("#errors").after('<span class="error">Please select a credit card type.</span>');
      hasError = true;
    }

Answer 1

1. Give it display:hidden in the css.
2. Give it display:hidden in the html.
3. Call $('#charge').hide()

here:

$(document).ready(function() { 
    $('#charge').hide();
}

And yes, you don't want all those ids the same.

Answer 2

First of all ID should not be same for controls. I am assuming charge is a control.

please check below code, it will help you.

$(document).ready(function() {
$('input[name="group1"]').change(function(){
    if ($(this).val() == "charge")
    {
        $('#charge').css('display', 'inline');
    }
    else
    {
        $('#charge').css('display', 'none');
    }
});
});

DEMO