javascript - 类型错误:处理程序未定义

Question

我有一个表单，其中包含要发送到 JS 函数的属性。这个函数在另一个 JS 文件中使用。当我提交我的表单时，我得到了 TypeError: handler is undefined

我对 JS 还是个新手，但令我困惑的是它正确地捕获了数据(如图像的第一行所示)，但在提交时却没有正确传递。该脚本的先前版本是成功的，但我不得不修改该方法，但它不再起作用了。所以我真的认为这是剧本。或者它可能是一些缺少的 jquery/ajax/引用？谢谢!

这是脚本:

<script>
var PLAN_CONFIG = {
  id: '',
  billing: 'annual',
  name: '',
  description: '',
  payment: '',
  panelLabel: 'Confirm',
};


$('[name=radiobtn]').click(function () {
  PLAN_CONFIG.billing = $(this).attr('value');
  console.log(PLAN_CONFIG);
});

$('#dropdown li').click(function () {
  $(".dd-button:first-child").text($(this).text());
  PLAN_CONFIG.id = $(this).attr('data-value');
  PLAN_CONFIG.name = $(this).data('name');
  PLAN_CONFIG.description = $(this).data('description');
  PLAN_CONFIG.payment = $(this).data('payment');
  console.log(PLAN_CONFIG);

});

</script>

JS文件(submission.js):

// checkout handler
var handler;
if (PLAN_CONFIG['payment'] === true) {
  var handler = StripeCheckout.configure({
    key: 'key',
    image: '/images/gavel.png',
    token: function(token) {
      /* Use the token to create the charge with a server-side script.
      You can access the token ID with `token.id`
      Pass along various parameters you get from the token response
      and your form.*/                    
      var myData = {
        billing: PLAN_CONFIG['billing'],
        token: token.id,
        email: token.email,
      };

      /* Make an AJAX post request using JQuery,
      change the first parameter to your charge script*/
      $.post("/create_subscription.php?plan=" + PLAN_CONFIG['id'], myData, function (data) {
        // if you get some results back update results
        $("#FormSubmission").hide()
        window.location.replace("http://thankyou.com");
      }).fail(function () {
        // if things fail, tell us
        window.location.replace("http://oops.com");
      })
    }
  });
}


$("#SubmissionButton").on('click', function() {
  submitToIS();

  if ((PLAN_CONFIG['payment']) == true) {
    launchStripeForm();
  }
});

$('#FormSubmission').on('submit', function (e) {
  submitToIS();

  if ((PLAN_CONFIG['payment']) == true) {
    launchStripeForm();
  }
  e.preventDefault();
});



function submitToIS() {
  $.ajax ({
    url:"/create_contact.php?plan=" + PLAN_CONFIG['id'],
    type: "POST",
    data: {
      // billing: PLAN_CONFIG['billing'],
      firstname: $("#firstname").val(),
      lastname: $("#lastname").val(),
      phonenumber: $("#phonenumber").val(),
      email: $("#email").val(),
      company: $("#company").val(),

    },

    success: function(response){
      if ((PLAN_CONFIG['payment']) == false) {
        window.location.replace("http://thankyou.com");
      }
      console.log(response);
    },

    fail: function(){
      if ((PLAN_CONFIG['payment']) == false) {
        window.location.replace("http://oops.com");
      }
    },

  })
}

function launchStripeForm() {

  handler.open({
    name: PLAN_CONFIG['name'],
    description: PLAN_CONFIG['description'],
    allowRememberMe: false, 
    email: $("#email").val(),
    panelLabel: PLAN_CONFIG['panelLabel'],
  });
}

// Close Checkout on page navigation
// $(window).on('popstate', function () {
//   handler.close();
// });

注意:为了隐私，我更改了一些 url 和 fxn 名称。此外，我其他页面上的表单引用了同一个 JS 文件，但它们提交成功。我觉得错误出在脚本中而不是文件中。

Answer 1

尝试围绕 .open() 而不是围绕 handler 定义移动您的条件。

// checkout handler

// Define anyway!! Even if wrongly defined... If it doesn't run in the end, there is no problem.
var handler = StripeCheckout.configure({
  key: 'key',
  image: '/images/gavel.png',
  token: function(token) {
    /* Use the token to create the charge with a server-side script.
    You can access the token ID with `token.id`
    Pass along various parameters you get from the token response
    and your form.*/                    
    var myData = {
      billing: PLAN_CONFIG['billing'],
      token: token.id,
      email: token.email,
    };

    /* Make an AJAX post request using JQuery,
    change the first parameter to your charge script*/
    $.post("/create_subscription.php?plan=" + PLAN_CONFIG['id'], myData, function (data) {
      // if you get some results back update results
      $("#FormSubmission").hide()
      window.location.replace("http://thankyou.com");
    }).fail(function () {
      // if things fail, tell us
      window.location.replace("http://oops.com");
    })
  }
});


// .....

function launchStripeForm() {
  if (PLAN_CONFIG['payment'] === true) {    // The RUN condition should be here.
    handler.open({
      name: PLAN_CONFIG['name'],
      description: PLAN_CONFIG['description'],
      allowRememberMe: false, 
      email: $("#email").val(),
      panelLabel: PLAN_CONFIG['panelLabel'],
    });
  }
}