Hide elements and unrequiring them based on dropdown selection

Question

I have seen examples of this using jquery or javascript, but I am not experienced with either of these at all so everything I try fails. I need all of the required fields hidden and 'unrequired' if that's a word, if someone chooses the option "PayPal".

          <tr>
            <td colspan="2"><h4>Please enter payment method.</h4></td>
          </tr>
          <tr>
            <td class="required" colspan="2">
              <label>
                Card Type <span>*</span>
                <select name="CardType" id="CardType">
                  <option value="" selected="selected">--Please Select--</option>
                  <option value="Amex">American Express</option>
                  <!--<option value="Discover">Discover</option>-->
                  <option value="MasterCard">MasterCard</option>
                  <option value="PayPal">PayPal</option>
                  <option value="Visa">Visa</option>
                </select>
              </label>
            </td>
          </tr>
          <tr>
            <td class="required" width="50%">
              <label>
                Card Number <span>*</span> <br />
                <input type="text" name="CardNumber" id="CardNumber" class="text" maxlength="16" onkeypress="return isNumberKey(event)" />
                <em>&nbsp;</em>
              </label>
            </td>
            <td class="required" width="50%">
              <label>
                Security Code <span>*</span> <br />
                <input type="text" name="CardCode" id="CardCode" class="text" maxlength="5" onkeypress="return isNumberKey(event)" />
                <em><a href="javascript:void(0);" class="modalInput2" rel="#yesno">What's this?</a></em>
              </label>
            </td>
          </tr>
          <tr>
            <td class="required">
              <label>
                Expiration Month <span>*</span>
                <select name="CardMonth" id="CardMonth">
                  <option value="" selected="selected">--Month--</option>
                  <option value="01">January - (01)</option>
                  <option value="02">February - (02)</option>
                  <option value="03">March - (03)</option>
                  <option value="04">April - (04)</option>
                  <option value="05">May - (05)</option>
                  <option value="06">June - (06)</option>
                  <option value="07">July - (07)</option>
                  <option value="08">August - (08)</option>
                  <option value="09">September - (09)</option>
                  <option value="10">October - (10)</option>
                  <option value="11">November - (11)</option>
                  <option value="12">December - (12)</option>
                </select>
              </label>
            </td>
            <td class="required">
              <label>
                Expiration Year <span>*</span>
                <select name="CardYear" id="CardYear">
                  <option value="" selected="selected">--Year--</option>
                  <?
                    $yToday = date("Y");
                    $yLimit = $yToday + 10;
                    for($y=$yToday; $y<$yLimit; $y++)
                        print "<option value='$y'>$y</option>\n";
                  ?>
                </select>
              </label>
            </td>
          </tr>

I've looked at the following posts for guidance but they are just confusing me: Show hide elements based on ID from select dropdown javascript and jQuery show/hide text field based on a dropdown selection value and a radiobutton

Nothing that I look for seems to have the capability of removing required fields based on that selection. I still need them to be required if the user chooses any of the credit card options, just not for PayPal. Can someone please post a link that they think is the best course for this situation or some sample code I can look at?

Answer 1

First, you may be using the <label> tag incorrectly. In my jsFiddle demo, I wanted to check each label's text in order to not hide the Card Type cell. However, the label surrounds not only the text, but also the <select> element itself. This is not how the label tag should be used. In an updated demo, I will still NOT the Card Type cell, but you will see the kludge that must be used (.split method) to determine the name of the label.

Next, I suggest making the fields *required, and not the table cells.

When validating your code, it is more difficult to determine if a field is required if you must always look at the corresponding table cell attributes. Much simple just to look at the field's own attributes. However, here is something that addresses your question as it is:

jsFiddle Demo

$('#CardType').change(function() {
    if ($(this).val() == 'PayPal'){
        $('.required').each(function() {
            $(this).removeClass('required');
            $(this).hide();
        });
    }
});

Revised example to show hiding all cells except the Card Type cell:

jsFiddle Demo 2

var lbl;
$('#CardType').change(function() {
    if ($(this).val() == 'PayPal'){
        $('.required').each(function() {
            lbl = $(this).find('label').text().split('*')[0];
            if (lbl != 'Card Type '){
                $(this).removeClass('required');
                $(this).hide();
            }
        });
    }
});

And one more example to demonstrate unhiding and restoring the required class when select is changed to something else. Note that it was necessary to add an additional class ("req_poss") to each <td> element for which the REQuired class may POSSibly need to be re-added:

jsFiddle Demo 3

var lbl;
$('#CardType').change(function() {
    if ($(this).val() == 'PayPal'){
        $('.required').each(function() {
            lbl = $(this).find('label').text().split('*')[0];
            if (lbl != 'Card Type '){
                $(this).removeClass('required');
                $(this).hide();
            }
        });
    }else{
        $('.req_poss').each(function() {
            $(this).addClass('required').show();
        });
    }
});

Answer 2

add event $('#CardType').on('change',function() {});

and in this function get all the inputs and with the function $.each() if the value of select is paypal removeAttr() 'required' for all or just hide() it or whatever You want.

Answer 3

Sorry, I'm barely following what you're saying, the only things required are what you make required by not allowing other things to happen until there is input in them, that's easily taken care of by changing the attributes to remove "required" at the same time you hide other things

 $("#CardType").change(function(){
    if ($("#CardType).value()=="PayPal"){
    $("fieldYouWantToHide).hide();
    }

 });