Question

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

Form 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”仍然会处理年度订阅而不是每月订阅。令人惊讶的是，当表单弹出窗口时，它具有月值。但经过处理数据库显示Yearly包处理完毕。在没有ajax的python / flask代码中，我可以单独处理这两个包，所以问题不在我的视图中，它位于Ajax中的某个地方。请指教

Answer 1

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

中

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

1 个答案: