Jquery 如何从包含多个表单的页面捕获表单提交

我有一个包含发票的表，这意味着有多行，每行包含一个表单，用户可以在其中提交付款，如何使用jquery截取正确表单的提交

现在我可以截取第一个表单的提交，但我需要这是更通用的，并允许我截取任何表单的提交

非常感谢您的帮助，谢谢您抽出时间

我当前的代码：

payment.blade.php

checkout.js

$(document).ready(function() {
console.log("Checkout.js is running!");
Stripe.setPublishableKey('...');

var $form = $('form:last');
console.log($form);
$form.submit(function (event) {
    console.log("form submit event clicked");
    $('charge-error').addClass('hidden');
    $form.find('button').prop('disabled', true);
    if ($('#paymentMethod').val() == 'Saved Card') {
        console.log("reaching if statement");
        // No new card is used so just submit the form.
        $form.get(0).submit();
        return false;
    } else {
        console.log("reaching else statement");
        console.log($('#card-number').val());

        Stripe.card.createToken({
            number: $('#card-number').val(),
            cvc: $('#card-cvc').val(),
            exp_month: $('#card-expiry-month').val(),
            exp_year: $('#card-expiry-year').val()
        }, stripeResponseHandler);
        return false;
    }
});

function stripeResponseHandler(status, response) {
    if (response.error) {
        console.log("reaching error statement");
        $('#charge-error').removeClass('hidden');
        $('#charge-error').text(response.error.message);
        $form.find('button').prop('disabled', false);
    } else {
        console.log("reaching successful response statement");
        var token = response.id;
        // Insert the token into the form so it gets submitted to our local server:
        $form.append($('<input type="hidden" name="stripeToken" />').val(token));

        // Submit the form:
        $form.get(0).submit();
    }
}

$（文档）.ready（函数（）{
log（“Checkout.js正在运行！”）；
Stripe.setPublishableKey（“…”）；
var$form=$（'form:last'）；
console.log（$form）；
$form.submit（函数（事件）{
日志（“点击表单提交事件”）；
$（'charge-error'）.addClass（'hidden'）；
$form.find（'button'）.prop（'disabled'，true）；
if（$（'#paymentMethod'）.val（）=='保存的卡'）{
console.log（“到达if语句”）；
//没有使用新卡，只需提交表格即可。
$form.get（0.submit（）；
返回false；
}否则{
console.log（“到达else语句”）；
console.log（$（'#卡号'）.val（））；
Stripe.card.createToken({
编号：$（“#卡号”）.val（），
cvc:$（“#卡cvc”）.val（），
exp_month:$（“#卡到期月”）.val（），
经验年：$（“#卡到期年”）.val（）
}，stripeResponseHandler）；
返回false；
}
});
函数stripeResponseHandler（状态、响应）{
if（response.error）{
日志（“到达错误语句”）；
$（“#费用错误”）.removeClass（'hidden'）；
$（“#费用错误”）.text（response.error.message）；
$form.find（'button'）.prop（'disabled'，false）；
}否则{
日志（“到达成功响应语句”）；
var token=response.id；
//将令牌插入表单，以便将其提交到本地服务器：
$form.append（$（''）.val（标记））；
//提交表格：
$form.get（0.submit（）；
}
}

---

}))

只需更改表单选择器即可

var $form = $("form");

然后

访问窗体的子元素的步骤

$form.submit(function(){
  $this = $(this);
  var number = $this.find('#card-number').val(),
  cvc = $this.find('#card-cvc').val(),
  exp_month = $this.find('#card-expiry-month').val(),
  exp_year = $this.find('#card-expiry-year').val();      
});

---

只需更改表单选择器

var $form = $("form");

然后

访问窗体的子元素的步骤

$form.submit(function(){
  $this = $(this);
  var number = $this.find('#card-number').val(),
  cvc = $this.find('#card-cvc').val(),
  exp_month = $this.find('#card-expiry-month').val(),
  exp_year = $this.find('#card-expiry-year').val();      
});

---

感谢您的快速回复！这对我有用！但是，我对表单的子输入（如卡号和卡名）有一个疑问。我现在如何访问这些？谢谢你抽出时间！你能告诉我怎样提交表格吗？我当前返回false，以便将我的付款信息发送给我的付款处理程序，然后当我从付款处理程序收到信息时，我需要提交表单。您只需在准备提交时调用

$this.submit（）

@Rapid3642感谢您的快速响应！这对我有用！但是，我对表单的子输入（如卡号和卡名）有一个疑问。我现在如何访问这些？谢谢你抽出时间！你能告诉我怎样提交表格吗？我当前返回false，以便将我的付款信息发送给我的付款处理程序，然后当我从付款处理程序收到信息时，我需要提交表单。您只需在准备提交时调用

$this.submit（）

@RAPID 3642