Jquery ajax not loading in same page : I'm trying to load my stripe payment success message when the form is submitted but for some reason the page always refreshes and then I get the display message. I don't want the page refresh though.


This is a javascript I'm working with (a mix of jquery and vanilla js)


    <script type="text/javascript">
                // this identifies your website in the createToken call below
                Stripe.setPublishableKey('stripe_key_here');
    
                function stripeResponseHandler(status, response) {
                    if (response.error) {
                        // re-enable the submit button
                        $('.submit-button').removeAttr("disabled");
    					// show hidden div
    					document.getElementById('a_x200').style.display = 'block';
                        // show the errors on the form
                        $(".payment-errors").html(response.error.message);
                    } else {
                        var form$ = $("#payment-form");
                        // token contains id, last4, and card type
                        var token = response['id'];
                        var posted = document.getElementById("post-price").value
                        // insert the token into the form so it gets submitted to the server
                        form$.append("<input type='hidden' name='stripeToken' value='" + token + "' />");
                        form$.append("<input type='hidden' name='posted' value='" + posted + "' />");
                        // and submit    
    
                        $("#payment-form").get(0).submit(function(e) {
    
                            e.preventDefault();
                            var url = "pricing.php";
    
                            $.ajax({
                                   type: "POST",
                                   url: url,
                                   data: $("#payment-form").serialize(),
                                   success: function(data)
                                   {
                                       alert(data);
                                   }
                                 });
    
                        });
    
                    }
                }
    </script>