Question

我有一个带有属性的表单，我发送给JS函数。此函数用于另一个JS文件。当我提交表单时，我得到TypeError: handler is undefined

console error screenshot

我仍然是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();
// });

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

Answer 1

这似乎是一个时间问题。在任何DOM事件被触发之前很久就会解析Submission.js。这意味着，当您的浏览器读取

时

var handler;
    if (PLAN_CONFIG['payment'] === true) {
        var handler = StripeCheckout.configure({
...

虽然声明了handler，但它仍然是未定义的，因为在那个时间点，根据您为计划配置对象分配初始值的方式，PLAN_CONFIG['payment']是一个空字符串，其结果为{ {1}}。

在启动条带表单之前，需要添加某种init函数，以便处理程序具有一些值。你可以通过多种方式解决这个问题。

FOR INSTANCE

false

然后，在代码中某处，在调用依赖于handler的其他函数之前，调用：

var handler; // initialize the variable
function initStripeHandler() {
    handler = StripeCheckout.configure({
        key: 'key',
        image: '/images/gavel.png',
        token: function(token) {...}
    });
}

Answer 2

尝试将条件移至.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'],
    });
  }
}

TypeError：handler未定义

2 个答案: