Ajax在提交時執行不同的表單

Question

我創建了兩個表單並分配了不同的提交按鈕ID。但是，即使我爲不同的ajax調用執行不同的按鈕，ajax也會每次執行單一形式。以下是代碼：

Form1。

<button class='btn genz-light-red'type='submit' 
       style="margin-top:20px;width:50%; background:#FF1744; height:33px;color:white;" id="customButton">Enroll</button> 
        </div> 
       </form> 
       <script src="https://checkout.stripe.com/checkout.js"></script> 
    <script type="text/javascript"> 
    var handler = StripeCheckout.configure({ 
     key: 'pk_test_YgHVTCLIMQLW4NV6ntnJPAXs', 
     image: '/assets/img/icons/GenZ_Logo.png', 
     locale: 'auto', 
     token: function (token) { 

         $("#stripeToken").val(token.id); 
         $("#stripeEmail").val(token.email); 
         $("#monthlyForm").submit(); 
         $.ajax({ 
          url: '/monthlycharged', 
          data: $('form').serialize(), 
          type: 'POST', 
          success: function(response) { 
           console.log(response); 
          }, 
          error: function(error) { 
           console.log(error); 
          } 
         }); 
        } 
       }); 

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

        handler.open({ 
         name:'Monthly', 
         description:'Monthly Package', 
         amount:1450 
        }); 
        e.preventDefault(); 
       }); 

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

       </script> 

窗體2：

<form action='/cancelannual' method='post'><a href="/cancelannual"> 
         <input class='btn genz-light-red'style=";width:50%; background:#FF1744; height:33px;color:white;"type="submit" value="Cancel" /></a></form> 
      <!-- Custom Button --> 
       <form id="yearlyForm" action="/yearlycharged" method="post" > 

        <div class="form-group"> 
       <input type="hidden" id="stripeToken" name="stripeToken" /> 
       <input type="hidden" id="stripeEmail" name="stripeEmail" /> 
       <button class='btn genz-light-red'type='submit' 
       style="margin-top:20px;width:50%; background:#FF1744; height:33px;color:white;" id="customButton1">Enroll</button> 
        </div> 
       </form> 
       <script src="https://checkout.stripe.com/checkout.js"></script> 
       <script type="text/javascript"> 
       var handler = StripeCheckout.configure({ 
        key: 'pk_test_YgHVTCLIMQLW4NV6ntnJPAXs', 
        image: '/assets/img/icons/GenZ_Logo.png', 
        locale: 'auto', 
        token: function (token) { 

         $("#stripeToken").val(token.id); 
         $("#stripeEmail").val(token.email); 
         $("#yearlyForm").submit(); 
         $.ajax({ 
          url: '/yearlycharged', 
          data: $('form').serialize(), 
          type: 'POST', 
          success: function(response) { 
           console.log(response); 
          }, 
          error: function(error) { 
           console.log(error); 
          } 
         }); 
        } 
       }); 

       $('#customButton1').on('click', function (e) { 
        handler.open({ 
         name:'Yearly', 
         description:'Yearly Package', 
         amount:9500 
        }); 
        e.preventDefault(); 
       }); 

       // Close Checkout on page navigation 
       $(window).on('popstate', function() { 
        handler.close(); 
       }); 

       </script> 

如果我點擊「的CustomButton」它處理的，如果我點擊「customButton1」每年訂閱還是它處理的年度訂閱，而不是每月。令人驚訝的是，當表單彈出窗口中有每月的值。但是經過處理數據庫顯示年度包處理。在我的python/flask代碼中沒有ajax，我可以單獨處理這兩個包，所以問題不在我的視圖中，它存在於Ajax中的某處。請告知

Answer 1

您在全局範圍內有兩個var handler聲明 - 第二個隱藏了第一個。分別命名它們或將兩個代碼片段分開包裝$(document).ready(function() {...});