javascript - Ajax 在提交时执行不同的表单

Question

我创建了两个表单并分配了不同的提交按钮 ID。但 ajax 每次都会执行单个表单，即使我为不同的 ajax 调用执行不同的按钮。代码如下:

表格1。

<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”，它仍然会处理每年订阅而不是每月订阅。令人惊讶的是，当表单弹出时，其中包含每月值。但处理后数据库显示已处理的年度包裹。在我的没有ajax的python/flask代码中，我可以单独处理这两个包，所以我认为问题不在Ajax中的某个地方。请指教

Answer 1

全局作用域中有两个 var handler 声明 - 第二个隐藏第一个。以不同的方式命名它们或将两个代码片段包装在单独的 $(document).ready(function() {...});