防止提交條形式

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