javascript - 如何获取表单 onsubmit 以检查 Google Checkout 按钮的条款

Question

我正在使用 Google Checkout，但 onsubmit 函数出现问题。

我设置了“同意条款”复选框，以便用户必须接受条款才能继续结账。我正在 HTML 表单元素上调用一个函数...

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

其中包含谷歌结帐按钮，如下所示:

<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>

但是，无论选中或不选中复选框，页面都会继续。

我错过了什么？

Answer 1

仅供引用Here's the question I really meant to ask

当您直接进入 onsubmit 行时，您将分别返回 true 或 false，对吧？就像这样:

onsubmit="return false;"

好吧，让我们来分析一下代码中实际发生的情况。由于您的代码中可能会返回 false，因此提交时可能会发生以下两种情况。

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

但您真正要寻找的是 onsubmit="return false;" 或 onsubmit="return true;" 所以这就是您需要执行的操作:

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;
}

但是，最重要部分是:

<!-- 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();">