Question

I’m using Google Checkout and having a problem with the onsubmit function.

I have an “Agree to terms” checkbox that I’ve put in place so that users must accept the terms before continuing with the checkout. I’m calling a function on the HTML form element…

function preCheckout() {
        if( !document.getElementById('terms').checked ) {
            // Requirements not accepted.
            $('.warning').animate({top: -$('.warning').outerHeight()}, 500);
            return false;
        }
    }

which contains the google checkout button like so:

<form method="POST"
        action="https://sandbox.google.com..."
            accept-charset="utf-8" onsubmit="preCheckout();">

        <div>
            <input type="checkbox" id="terms" name="accept_terms" value="" />
            <p>I agree to all the terms and requirements...</p>
        </div>

        <input type="hidden" name="item_name_1" value="Simple Notes Monthly Subscription"/>
        <input type="hidden" name="item_description_1" value=""/>
        <input type="hidden" name="item_quantity_1" value="1"/>
        <input type="hidden" name="item_price_1" value=""/>
        <input type="hidden" name="item_currency_1" value="USD"/>
        <input type="hidden" name="shopping-cart.merchant-private-data" value="" />

        <input type="hidden" name="tax_rate" value="0.065"/>
        <input type="hidden" name="tax_us_state" value="UT"/>

        <input type="hidden" name="_charset_"/>

        <input type="hidden" name="continue-shopping-url" value="/thankyou.php" />

        <input type="image" name="Google Checkout" id="google-btn" alt="Fast checkout through Google"
        src="https://checkout.google.com/buttons/checkout.gif?merchant_id=id&w=180&h=46&style=trans&variant=text&loc=en_US"
        height="46" width="180"/>
    </div>
</form>

However the page continues on with or without the checkbox being checked.

What am I missing?

Answer 1

FYI Here’s the question I really meant to ask

When you right into the onsubmit line it’s self, you return the true or false respectively, right? Like so:

onsubmit="return false;"

Well let’s breakdown what is actually going in your code. Because you are potentially returning false in your code, here’s the two possibilities of what might happen on submit.

onsubmit="false" // form is a success and performs form action
onsubmit="" // form is a success and performs form action

but what you’re really looking for is onsubmit="return false;" or onsubmit="return true;" so here’s what you need to do:

function preCheckout() {
    if( !document.getElementById('terms').checked ) {
        // Requirements not accepted.
        $('.warning').animate({top: -$('.warning').outerHeight()}, 500);
        return false;
    }

    // return true if everything is fine
    return true;
}

However, the most important part is this:

<!-- all I did was add a "return" to your onsubmit -->
<form method="POST" action="https://sandbox.google.com..." accept-charset="utf-8" onsubmit="return preCheckout();">