Javascript 结合条带的AJAX请求

我已经回顾了几个线程

我使用的是

stripe.js

，我想用一个按钮提交我的定制表单和其他表单，以及附加信息。其思想是发送两条不同的消息，一条发送给客户端，另一条发送给服务提供商

我希望通过“付款”按钮提交这两个表单（或者在任何表单上提交），这样我就可以在控制器/模型中提取名称作为索引，然后发送电子邮件，通知双方关于交易的不同情况

问题是，stripe在

javascript

上处理所有表单提交，我对如何将它与我自己的AJAX请求结合起来同时发送两个表单感到困惑

这是我视图中的JS代码，如果我这样做，则不会创建令牌，也不会执行任何操作：

function stripeResponseHandler(status, response) {

    // Grab the form:

    var $form = $('#payment-form');

    if (response.error) { // Problem!

      // Show the errors on the form:

      $form.find('.payment-errors').text(response.error.message);

      $form.find('.submit').prop('disabled', false); // Re-enable submission

    } else { // Token was created!

      // Get the token ID:

      var token = response.id;  

      // Insert the token ID into the form so it gets submitted to the server:

      $form.append($('<input type="hidden"name="stripeToken">').val(token));

      // Submit the form:

      $form.get(0).submit();

    }

  };


  function submitTwoForms() {

    var dataObject = {invoice: "invoice", name: "name", phone: "phone", email: "email", message: "message"};

      $.ajax({

        url  : base.url + '/index.php/contact',

        data : dataObject,

        type : "GET",

        success: $(function(){

              var $form = $('#payment-form');

              $form.submit(function(event) {

              // Disable the submit button to prevent repeated clicks:

              $form.find('.submit').prop('disabled', true);


              // Request a token from Stripe:

              Stripe.card.createToken($form, stripeResponseHandler);

              //to prevent submit

              return false;   

              });       

        })

      });

  }


  $('#customButton').submit(function() {

    submitTwoForms();

    return false;

  });  

函数stripeResponseHandler（状态、响应）{
//抓取表格：
var$form=$（“#付款单”）；
if（response.error）{//问题！
//在表单上显示错误：
$form.find（'.payment errors'）.text（response.error.message）；
$form.find（'.submit'）.prop（'disabled'，false）；//重新启用提交
}否则{//令牌已创建！
//获取令牌ID：
var token=response.id；
//将令牌ID插入表单，以便将其提交到服务器：
$form.append（$（''）.val（标记））；
//提交表格：
$form.get（0.submit（）；
}
};
函数submitTwoForms（）{
var dataObject={发票：“发票”，名称：“名称”，电话：“电话”，电子邮件：“电子邮件”，消息：“消息”}；
$.ajax({
url:base.url+'/index.php/contact'，
数据：数据对象，
键入：“获取”，
成功：$（函数（）{
var$form=$（“#付款单”）；
$form.submit（函数（事件）{
//禁用“提交”按钮以防止重复单击：
$form.find（'.submit'）.prop（'disabled'，true）；
//从Stripe请求令牌：
Stripe.card.createToken（$form，stripeResponseHandler）；
//阻止提交
返回false；
});       
})
});
}
$（'#customButton'）。提交（函数（）{
submitTwoForms（）；
返回false；
});  

---

非常感谢所有的指针。

我最终按照如下方式重新编写了代码，现在可以使用了

<script>

 $("#customButton").on('click', function() {

  $('#contactForm')[0].submit(function(event){

    var formData = {

      'invoice'   :$('input[name=invoice]').val(),

      'name'      :$('input[name=name]').val(),

      'email'     :$('input[name=email]').val(),

      'phone'     :$('input[name=phone]').val(),

      'message'   :$('input[name=message]').val(),

    };


    $.ajax({

        type     : 'POST',

        url      : base.url + '/index.php/contact',

        data     : formData,

        dataType : 'json',

        encode   : true

    })

  });

})  

  function stripeResponseHandler(status, response) {

    // Grab the form:

    var $form = $('#payment-form');

    if (response.error) { // Problem!

      // Show the errors on the form:

      $form.find('.payment-errors').text(response.error.message);

      $form.find('.submit').prop('disabled', false); // Re-enable submission



    } else { // Token was created!

      // Get the token ID:

      var token = response.id;

      // Insert the token ID into the form so it gets submitted to the server:

      $form.append($('<input type="hidden" name="stripeToken">').val(token));

      // Submit the form:

      $form.get(0).submit();

    }

  };

  $(function() {

    var $form = $('#payment-form');

    $form.submit(function(event) {

      // Disable the submit button to prevent repeated clicks:

      $form.find('.submit').prop('disabled', true);

      // Request a token from Stripe:

      Stripe.card.createToken($form, stripeResponseHandler);

      // Prevent the form from being submitted:

      return false;

    });

  })

</script>

$（“#自定义按钮”）。在（'单击'，函数（）上{
$（'#contactForm'）[0]。提交（函数（事件）{
var formData={
'发票'：$（'input[name=invoice]'）。val（），
'name'：$（'input[name=name]'）。val（），
'email'：$（'input[name=email]'）。val（），
'phone'：$（'input[name=phone]'）。val（），
'message'：$（'input[name=message]'）。val（），
};
$.ajax({
键入：“POST”，
url:base.url+'/index.php/contact'，
数据：formData，
数据类型：“json”，
编码：正确
})
});
})  
函数stripeResponseHandler（状态、响应）{
//抓取表格：
var$form=$（“#付款单”）；
if（response.error）{//问题！
//在表单上显示错误：
$form.find（'.payment errors'）.text（response.error.message）；
$form.find（'.submit'）.prop（'disabled'，false）；//重新启用提交
}否则{//令牌已创建！
//获取令牌ID：
var token=response.id；
//将令牌ID插入表单，以便将其提交到服务器：
$form.append（$（''）.val（标记））；
//提交表格：
$form.get（0.submit（）；
}
};
$（函数（）{
var$form=$（“#付款单”）；
$form.submit（函数（事件）{
//禁用“提交”按钮以防止重复单击：
$form.find（'.submit'）.prop（'disabled'，true）；
//从Stripe请求令牌：
Stripe.card.createToken（$form，stripeResponseHandler）；
//阻止提交表单：
返回false；
});
})

---

希望其他人能从中受益。

我最终按照如下方式重新编写了代码，目前正在运行

<script>

 $("#customButton").on('click', function() {

  $('#contactForm')[0].submit(function(event){

    var formData = {

      'invoice'   :$('input[name=invoice]').val(),

      'name'      :$('input[name=name]').val(),

      'email'     :$('input[name=email]').val(),

      'phone'     :$('input[name=phone]').val(),

      'message'   :$('input[name=message]').val(),

    };


    $.ajax({

        type     : 'POST',

        url      : base.url + '/index.php/contact',

        data     : formData,

        dataType : 'json',

        encode   : true

    })

  });

})  

  function stripeResponseHandler(status, response) {

    // Grab the form:

    var $form = $('#payment-form');

    if (response.error) { // Problem!

      // Show the errors on the form:

      $form.find('.payment-errors').text(response.error.message);

      $form.find('.submit').prop('disabled', false); // Re-enable submission



    } else { // Token was created!

      // Get the token ID:

      var token = response.id;

      // Insert the token ID into the form so it gets submitted to the server:

      $form.append($('<input type="hidden" name="stripeToken">').val(token));

      // Submit the form:

      $form.get(0).submit();

    }

  };

  $(function() {

    var $form = $('#payment-form');

    $form.submit(function(event) {

      // Disable the submit button to prevent repeated clicks:

      $form.find('.submit').prop('disabled', true);

      // Request a token from Stripe:

      Stripe.card.createToken($form, stripeResponseHandler);

      // Prevent the form from being submitted:

      return false;

    });

  })

</script>

$（“#自定义按钮”）。在（'单击'，函数（）上{
$（'#contactForm'）[0]。提交（函数（事件）{
var formData={
'发票'：$（'input[name=invoice]'）。val（），
'name'：$（'input[name=name]'）。val（），
'email'：$（'input[name=email]'）。val（），
'phone'：$（'input[name=phone]'）。val（），
'message'：$（'input[name=message]'）。val（），
};
$.ajax({
键入：“POST”，
url:base.url+'/index.php/contact'，
数据：formData，
数据类型：“json”，
编码：正确
})
});
})  
函数stripeResponseHandler（状态、响应）{
//抓取表格：
var$form=$（“#付款单”）；
if（response.error）{//问题！
//在表单上显示错误：
$form.find（'.payment errors'）.text（response.error.message）；
$form.find（'.submit'）.prop（'disabled'，false）；//重新启用提交
}否则{//令牌已创建！
//获取令牌ID：
var token=response.id；
//将令牌ID插入表单，以便将其提交到服务器：
$form.append（$（''）.val（标记））；
//提交表格：
$form.get（0.submit（）；
}
};
$（函数（）{
var$form=$（“#付款单”）；
$form.submit（函数（事件）{
//禁用“提交”按钮以防止重复单击：
$form.find（'.submit'）.prop（'disabled'，true）；
//从Stripe请求令牌：
Stripe.card.createToken（$form，stripeResponseHandler）；
//阻止提交表单：
返回false；
});
})

希望其他人能从中受益