注册表单 + Stripe JS - 我必须点击提交两次

Question

我有一个包含 Stripe JS 的注册页面。用户填写完所有字段后，他们单击提交，除了控制台中位置 0 处的错误 Uncaught SyntaxError: Unexpected token < in JSON 之外没有任何反应。如果我然后再次单击提交，它会按预期工作。我知道问题是什么，我只是不知道如何解决它。StripeToken 没有附加在第一个“提交”上，而是附加在第二个“提交”上。我试过用 jQuery 两次触发表单提交。我试过把所有东西都放在函数中并按顺序运行它们。据我自己（有限）的知识，我已经尽我所能。    document.getElementById("submitbtn").style.display = "none";    var tabTitles = ['Let\'s get to know eachother...', 'We have to make sure...', 'Where\'s Wally?', 'Something to remember...', 'It\'s just business...'];    var currentTab = 0;    showTab(currentTab);    function showTab(n) {        var x = document.getElementsByClassName("tab");        x[n].style.display = "block";        if (n == 0) {            document.getElementById("prevBtn").style.display = "none";        } else {            document.getElementById("prevBtn").style.display = "inline";        }        if (n == (x.length - 1)) {            document.getElementById('submitbtn').style.display = "inline";            document.getElementById("nextBtn").style.display = "none";            document.getElementById("nextBtn").classList.add("initpayment");        } else {            document.getElementById("nextBtn").innerHTML = "Next";            document.getElementById('submitbtn').style.display = "none";            document.getElementById("nextBtn").style.display = "inline";        }        document.getElementById("tabTitle").innerHTML = tabTitles[n];        fixStepIndicator(n);    }    function nextPrev(n) {        var x = document.getElementsByClassName("tab");        if (n == 1 && !validateForm())            return false;        x[currentTab].style.display = "none";        currentTab = currentTab + n;        showTab(currentTab);    }第一次提交尝试时出现错误消息：Uncaught SyntaxError: Unexpected token < in JSON at position 0。第一次尝试的结果：无。第二次尝试的结果：如预期预期结果：在第一次提交尝试时，stripe 生成令牌，将其附加到表单中，然后提交继续正常进行。

Answer 1

我没有你的代码 tbh 但根据你的标题，这是如何做到的：

设置一个具有默认值的 var：

var numofclicks = 0;

现在就在其下方，您只需添加您应该在尝试切换的按钮上创建的 onclick 函数，例如，让我们设置 clicked() 函数的名称，以便：

function clicked(){

 numofclick++;

 if(numofclicks = 1){

 //do stuff here

 }

 }

Answer 2

解决。

document.getElementById("submitbtn").style.display = "none";

    var tabTitles = ['Let\'s get to know eachother...', 'We have to make sure...', 'Where\'s Wally?', 'Something to remember...', 'It\'s just business...'];

    var currentTab = 0;

    showTab(currentTab);

    function showTab(n) {

        var x = document.getElementsByClassName("tab");

        x[n].style.display = "block";

        if (n == 0) {

            document.getElementById("prevBtn").style.display = "none";

        } else {

            document.getElementById("prevBtn").style.display = "inline";

        }

        if (n == (x.length - 1)) {

            document.getElementById('submitbtn').style.display = "inline";

            document.getElementById("nextBtn").style.display = "none";

            document.getElementById("nextBtn").classList.add("initpayment");

        } else {

            document.getElementById("nextBtn").innerHTML = "Next";

            document.getElementById('submitbtn').style.display = "none";

            document.getElementById("nextBtn").style.display = "inline";

        }

        document.getElementById("tabTitle").innerHTML = tabTitles[n];

        fixStepIndicator(n);

    }

    function nextPrev(n) {

        var x = document.getElementsByClassName("tab");

        if (n == 1 && !validateForm())

            return false;

        x[currentTab].style.display = "none";

        currentTab = currentTab + n;

        showTab(currentTab);

    }

    function validateForm() {

        var x, y, i, valid = true;

        x = document.getElementsByClassName("tab");

        y = x[currentTab].getElementsByTagName("input");

        for (i = 0; i < y.length; i++) {

            if (y[i].value == "") {

                y[i].className += " invalid";

                valid = false;

            }

        }

        if (valid) {

            document.getElementsByClassName("step")[currentTab].className += " finish";

        }

        return valid;

    }

    function fixStepIndicator(n) {

        var i, x = document.getElementsByClassName("step");

        for (i = 0; i < x.length; i++) {

            x[i].className = x[i].className.replace(" active", "");

        }

        x[n].className += " active";

    }

    var stripe = Stripe('<?php echo $StripePublishKey; ?>');

    var elements = stripe.elements();

    var card = elements.create('card');

    card.mount('#card-element');

    $(document).ready(function () {

        $(document.body).on('change', "#PID_select", function () {

            var optPrice = $("#PID_select option:selected").data('price');

            $('#charge_amount').empty().html(optPrice);

        });

        var form = document.getElementById('regForm');

        form.addEventListener('submit', function (e) {

            e.preventDefault();

            $('body').addClass('loading');

            stripeToken();

        });

        function stripeToken() {

            stripe.createToken(card).then(function (result) {

                if (result.error) {

                    $('body').append('<div class="pgn-wrapper" data-position="bottom" style="left:0px;"><div class="pgn pgn-bar"><div class="alert alert-danger"><button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button><span>' + result.error.message + '</span></div></div></div>');

                } else {

                    handleForm(result.token.id.toString());

                }

            });

        }

        function handleForm(token) {

            var FData = $('#regForm').serializeArray();

            FData.push({name: 'stripeToken', value: token});

            $.post('register', FData, function (registerReturn) {

                var $Return = JSON.parse(registerReturn);

                if ($Return.status === 'complete') {

                    window.location.replace('login?RD=3');

                } else if ($Return.status === '3d_required') {

                    var paymentIntentSecret = $Return.PIK;

                    stripe.handleCardPayment(paymentIntentSecret).then(function (result) {

                        if (result.error) {

                            $.post('register', {errorReg: true, token: $Return.token});

                            $('body').append('<div class="pgn-wrapper" data-position="bottom" style="left:0px;"><div class="pgn pgn-bar"><div class="alert alert-danger"><button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button><span>' + result.error.message + '</span></div></div></div>');

                            $('body').removeClass('loading');

                        } else {

                            $.post('register', {finishReg: true, token: $Return.token});

                            window.location.replace('login?RD=3');

                        }

                    });

                } else if ($Return.status === 'error') {

                    $('body').append($Return.response);

                }

            });

            $('body').removeClass('loading');

        }

    });