防止提交条形式

Question

我正在开发一个我想要集成条形支付网关的站点。我已经在另一个网站上实现了这个代码，但是这个代码在我当前的网站上没有工作。我不知道为什么。我的代码如下

代码

<script type="text/javascript" src="https://js.stripe.com/v2/"></script> 
<script type="text/javascript"> 
    Stripe.setPublishableKey('API_KEY'); 
</script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 

     var $form = $('#paymentform'); 

     $form.submit(function(event) { 
     event.preventDefault(event); 
     $form.find('#pay_submit').prop('disabled', true); 

     Stripe.card.createToken($form, stripeResponseHandler); 

     return false; 
    }); 

}); 

function stripeResponseHandler(status, response) { 
    var $form = $('#payment-form'); 

    if (response.error) { 

     $form.find('.payment-errors').text(response.error.message); 
     $form.find('#pay_submit').prop('disabled', false); 

    } else { 

     var token = response.id; 

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

     $form.get(0).submit(); 
    } 
    }; 
</script> 

<form action="stripe.php" class="contact-form col-md-8 col-md-offset-2" method="POST" id="paymentform"> 
    <span class="payment-errors"></span> 

    <label for="company-name">Company Name:</label> 
    <input type="text" class="form-control" id="company-name" name="company_name" required> 

    <label for="name">Your Name:</label> 
    <input type="text" class="form-control" id="name" name="name" required> 

    <label for="email">Email:</label> 
    <input type="email" class="form-control" id="email" name="email" required> 

    <label for="Phone">Phone:</label> 
    <input type="text" class="form-control" id="Phone" name="phone" required> 

    <label for="City">City:</label> 
    <input type="text" class="form-control" id="City" name="city" required> 

    <label for="stations">Address:</label> 
    <input type="text" class="form-control" id="stations" name="stations" required> 

    <label for="Card">Credit Card #:</label> 
    <input type="text" size="20" data-stripe="number" class="form-control" id="Card" required> 

    <label for="cvc">CVC:</label> 
    <input type="text" size="4" data-stripe="cvc" class="form-control" id="cvc" required> 

    <label for="exp_month">Expiry Month(MM):</label> 
    <input type="text" size="2" data-stripe="exp_month" class="form-control" id="exp_month" required> 

    <label for="exp_year">Expiry Year(YY):</label> 
    <input type="text" size="2" data-stripe="exp_year" class="form-control" id="exp_year" required> 

    <button type="submit" class="btn btn-default btn-lg getS-btn" id="pay_submit">PAY</button> 
</form> 

在同一页的末尾其他脚本我有不同的用途

<script type="text/javascript" src="js/jquery.1.11.1.js"></script> 
<script type="text/javascript" src="js/bootstrap.js"></script> 
<script type="text/javascript" src="js/SmoothScroll.js"></script> 
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script> 
<script type="text/javascript" src="js/jquery.isotope.js"></script> 
<script type="text/javascript" src="js/jqBootstrapValidation.js"></script> 
<script type="text/javascript" src="js/contact_me.js"></script> 
<script type="text/javascript" src="js/main.js"></script> 

我认为jQuery是不是从表单提交预防，这就是为什么api不起作用。

Answer 1

似乎误差是在你的jquery（意味着jQuery是产生误差），因为它形式不会阻止。在您的开发网站上仔细检查。

Answer 2

您可以通过在表单标记的onSubmit（）方法上使用这个巧妙的技巧来阻止表单提交。

实施例：

<form action="stripe.php" class="contact-form col-md-8 col-md-offset-2" method="POST" id="paymentform" onSubmit="return false;">