jQuery AJAX POST无法触发

Question

Here is my form. It's a Stripe form:

<form  id = "the_form" method = "post">
    <input type = "hidden" name = "plan" value = "silver"/>

    <script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
        data-key="<?php echo $stripe['publishable_key']; ?>"
        data-description=""
        data-amount="19900"
        data-locale="auto"></script>

    <input type = "hidden" name = "email" value = "<?php echo $_SESSION['b_email']; ?>"/>

    <input type = "hidden" name = "id" value = "<?php echo $_SESSION['brand_id']; ?>"/>
</form>

I want to post this form data to file called handle_stripe_push.php. Here is my jQuery AJAX POST call:

$(document).ready(function(e) {  

        $("#the_form").submit(function(evnt){

            console.log("Form submit event fired")

            $.post('handle_stripe_push.php', $(this).serialize(), function(data){
                alert(data);

            }).fail(function(err, status){

                console.log(err + " " + status)
            })
            evnt.preventDefault()
        }); 

});

The problem. This function is not even firing when I click submit on my form. I know this because "Form submit event fired" is not being output to my console.

I am on Google Chrome. I did an Inspect Element, checked Console - there are no errors being displayed.

This is driving me a little crazy, I'd appreciate your help

Answer 1

Have you included your locally installed JavaScript library in your page? Like you included the stripe library. Try including stripe library before jquery.

E.g.

<script src="https://checkout.stripe.com/checkout.js"></script>
<script src="jquery-latest.min.js"></script>