Check if checkbox is checked using javascript wont work

Question

I have a html form, which has a bunch of inputs inside. In this html form I also have a checkbox, which I then check if the user has checked using javascript, only problem is that it doesn't work. Whenever I click the button to submit, which is then supposed to run through the code and check if the checkbox is checked, it just gives me a couple of errors because the other input values are not set which it is supposed to do, but I want it to just check if the checkbox is checked and if it is do the function inside the if statement, or if the checkbox isn't checked run the alert message.

This is my script which does not work:

    <script type="text/javascript">
        $(document).ready(function() {  

        function checkBoxCheck() {

        if (document.getElementById('AcceptRules').checked) { //this is where I check if the checkbox is checked

        var handler = StripeCheckout.configure({
            key: 'removed for security',
            image: 'TestGPCheckoutImg.png',
            token: function(token) {

                var $form = $('#payment-form');

                $form.append($('<input type="hidden" name="stripeToken" />').val(token.id));

                $form.get(0).submit();
            }
        });

        $('#customButton').on('click', function(e) {

            var amount = Math.round($("#amount").val()*100);

            handler.open({
            name: 'Payment',
            description: 'desciption for produ',
            amount: amount
            });
            e.preventDefault();
        });

        $(window).on('popstate', function() {
            handler.close();
        });

        } else {
            alert("Remember to check the checkbox for terms of use"); //this is where I try to alert the user with a message
        }
    }

    });
        </script>

    <form id="payment-form" action="chargeCard.php" method="POST" name="payment-form">
    <input onkeypress="return isNumberKey(event)" type="text" name="amount" id="amount" value="" readonly/>
    <input type="text" name="emailForPayment" id="emailForPayment" placeholder="Enter Email"/>
    <input type="text" name="displayNameForPayment" id="displayNameForPayment" placeholder="Enter Display Name" maxlength="12"/>
    <input type="checkbox" id="AcceptRules" name="AcceptRuels" value="AcceptRules"/> <!-- this is the checkbox -->
    <input type="image"  src="image123.png" id="customButton" value="button" alt="button" onClick="checkBoxCheck()"/> <!--this is the button with the function in -->
    </form>

<script type="text/javascript">
                    function toDec(code) {
                    return code - 48;
                    }
                    function isNumberKey(evt)
                    {
                    var charCode = (evt.which) ? evt.which : event.keyCode
                    if (charCode > 31 && (charCode < 48 || charCode > 57 || toDec(charCode) != currentBid + 1)) 
                    return false;

                    return true;
                    }
                    </script>

I have a feeling the error is saying something like `checkBoxCheck is not a function` ? — Jonathan, Apr 20 '15 at 22:08

score 1 · Answer 1 · edited May 23 '17 at 10:10

You're scope is wrong.

$(document).ready(function () {
    // I don't work.
    function checkBoxCheck() {
        alert("I have local scope");
    }
});

function checkBoxCheck() {
    alert("I have global scopeage");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="checkBoxCheck();">Click</button>

See this answer for a better explanation.

Check if checkbox is checked using javascript wont work

1 Answers1