送信時に別のフォームを実行するAjax

Question

私は2つのフォームを作成し、異なる送信ボタン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> 

のForm2：私はをクリックすると、「customButtonは」それは私が「customButton1」をクリックした場合の年間サブスクリプションを処理

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

まだそれは代わりに毎月の年間サブスクリプションを処理します。驚いたことに、フォームポップアップのときには月ごとの値が入ります。しかし、データベースを処理した後は、Yearlyパッケージが処理されます。私のpython /フラスココードでは、Ajaxを使わないで、両方のパッケージを別々に処理できるので、問題は私の意見ではなく、Ajaxのどこかにあります。第二は、最初に非表示になります - あなたはグローバルスコープで2つのvar handler宣言を持っている

Answer 1

お知らせください。別の名前を付けたり、両方のコードフラグメントを別々にラップしてください。$(document).ready(function() {...});