注册表单 + 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(){&nbsp;numofclick++;&nbsp;if(numofclicks = 1){&nbsp;//do stuff here&nbsp;}&nbsp;}

Answer 2

解决。document.getElementById("submitbtn").style.display = "none";&nbsp; &nbsp; var tabTitles = ['Let\'s get to know eachother...', 'We have to make sure...', 'Where\'s Wally?', 'Something to remember...', 'It\'s just business...'];&nbsp; &nbsp; var currentTab = 0;&nbsp; &nbsp; showTab(currentTab);&nbsp; &nbsp; function showTab(n) {&nbsp; &nbsp; &nbsp; &nbsp; var x = document.getElementsByClassName("tab");&nbsp; &nbsp; &nbsp; &nbsp; x[n].style.display = "block";&nbsp; &nbsp; &nbsp; &nbsp; if (n == 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("prevBtn").style.display = "none";&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("prevBtn").style.display = "inline";&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; if (n == (x.length - 1)) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('submitbtn').style.display = "inline";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("nextBtn").style.display = "none";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("nextBtn").classList.add("initpayment");&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("nextBtn").innerHTML = "Next";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('submitbtn').style.display = "none";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("nextBtn").style.display = "inline";&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("tabTitle").innerHTML = tabTitles[n];&nbsp; &nbsp; &nbsp; &nbsp; fixStepIndicator(n);&nbsp; &nbsp; }&nbsp; &nbsp; function nextPrev(n) {&nbsp; &nbsp; &nbsp; &nbsp; var x = document.getElementsByClassName("tab");&nbsp; &nbsp; &nbsp; &nbsp; if (n == 1 && !validateForm())&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; &nbsp; &nbsp; x[currentTab].style.display = "none";&nbsp; &nbsp; &nbsp; &nbsp; currentTab = currentTab + n;&nbsp; &nbsp; &nbsp; &nbsp; showTab(currentTab);&nbsp; &nbsp; }&nbsp; &nbsp; function validateForm() {&nbsp; &nbsp; &nbsp; &nbsp; var x, y, i, valid = true;&nbsp; &nbsp; &nbsp; &nbsp; x = document.getElementsByClassName("tab");&nbsp; &nbsp; &nbsp; &nbsp; y = x[currentTab].getElementsByTagName("input");&nbsp; &nbsp; &nbsp; &nbsp; for (i = 0; i < y.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (y[i].value == "") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; y[i].className += " invalid";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; valid = false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; if (valid) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementsByClassName("step")[currentTab].className += " finish";&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; return valid;&nbsp; &nbsp; }&nbsp; &nbsp; function fixStepIndicator(n) {&nbsp; &nbsp; &nbsp; &nbsp; var i, x = document.getElementsByClassName("step");&nbsp; &nbsp; &nbsp; &nbsp; for (i = 0; i < x.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x[i].className = x[i].className.replace(" active", "");&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; x[n].className += " active";&nbsp; &nbsp; }&nbsp; &nbsp; var stripe = Stripe('<?php echo $StripePublishKey; ?>');&nbsp; &nbsp; var elements = stripe.elements();&nbsp; &nbsp; var card = elements.create('card');&nbsp; &nbsp; card.mount('#card-element');&nbsp; &nbsp; $(document).ready(function () {&nbsp; &nbsp; &nbsp; &nbsp; $(document.body).on('change', "#PID_select", function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var optPrice = $("#PID_select option:selected").data('price');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#charge_amount').empty().html(optPrice);&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; var form = document.getElementById('regForm');&nbsp; &nbsp; &nbsp; &nbsp; form.addEventListener('submit', function (e) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('body').addClass('loading');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; stripeToken();&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; function stripeToken() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; stripe.createToken(card).then(function (result) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (result.error) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('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>');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; handleForm(result.token.id.toString());&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; function handleForm(token) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var FData = $('#regForm').serializeArray();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; FData.push({name: 'stripeToken', value: token});&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.post('register', FData, function (registerReturn) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var $Return = JSON.parse(registerReturn);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ($Return.status === 'complete') {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; window.location.replace('login?RD=3');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else if ($Return.status === '3d_required') {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var paymentIntentSecret = $Return.PIK;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; stripe.handleCardPayment(paymentIntentSecret).then(function (result) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (result.error) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.post('register', {errorReg: true, token: $Return.token});&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('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>');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('body').removeClass('loading');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.post('register', {finishReg: true, token: $Return.token});&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; window.location.replace('login?RD=3');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else if ($Return.status === 'error') {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('body').append($Return.response);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('body').removeClass('loading');&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });