Question

I’ve done this before, but for some reason it’s not working this time, and I’ve been staring at it for so long that I’ve pretty much guaranteed I’ll never find the problem…

I have this chunk of HTML, which creates a form.

<div class="paymentForm">               

    <span class="pgHeading" style="margin: 30px 0;">Payment Information</span>
    <div class="inputRedTemplate paymentType inputRoundedTop" onclick="javascript:displayPaymentFields()">
        <div class="label">Credit Card</div>
    </div>

    <div class="inputRedTemplate paymentType">
        <div class="label">Cash</div>
    </div>

    <div class="inputRedTemplate paymentType inputRoundedBottom" onclick="">
        <div class="label">Check</div>
    </div>

    <div id="cashPaymentBlock">
        <span>For cash payments, bills higher than $20 will not be accepted.</span>
    </div>

    <div id="ccPaymentBlock">
        <span class="ccDisclaimer" style="margin: 30px 0;">
           Your credit card transaction will be processed by your store location and you must
           present your credit card to the driver at the time the store delivers your order for a
           credit imprint and your signature.
        </span>

        <input id="card_name" name="cardName" class="inputRedTemplate inputFullWidth" placeholder="Cardholder Name" />
        <input id="card_number" name="cardNumber" class="inputRedTemplate inputFullWidth" placeholder="Card Number" onkeypress="return checkNumbers(event,this)" />
        <div class="error" id="err_msg" style="display: none;">Numbers only!</div>

        <input id="card_type" name="cardType" class="inputRedTemplate inputFullWidth inputRoundedBottom" placeholder="Credit Card Type" />
        <input id="card_expire_month" name="cardExpireMonth" class="inputRedTemplate gcNumber" placeholder="2 Digit Expiration Month" />
        <input id="card_expire_year" name="cardExpireYear" class="inputRedTemplate gcPin" placeholder="4 Digit Year" />
        <input id="card_zip" name="cardZip" class="inputRedTemplate inputFullWidth inputRoundedBottom" placeholder="Billing ZIP Code" />
    </div>
    <div class="btnRedTemplate btnFullWidth checkoutBtn floatLeft" style="margin-top:30px;" onclick="" title="Submit Button" />Submit</div>
</div>

I have the following script:

<script>
    $(document).ready( function () {
        hideAllPaymentBlocks();
    })

    function hideAllPaymentBlocks() {
      $('#cashPaymentBlock').hide();
      $('#ccPaymentBlock').hide();
      // add line for checks, too
    }    

    function displayPaymentFields() {
        $('ccPaymentBlock').show();  
    }

</script>

The hideAllPaymentBlocks function runs correctly in the ready function, but displayPaymentFields doesn’t seem to be running upon clicking the Credit Card div. There are no errors; it just doesn’t do anything. Can anyone point me in the right direction? As I said, I’ve been staring at this a while now, and I’m sure it’s an easy fix but I can’t get my brain working.

Answer 1

You forget the hash $('#ccPaymentBlock').show();