如何从具有多个表单的页面捕获表单提交

Question

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

现在我可以拦截第一个表单的提交，但我需要它更加通用并允许我拦截任何表单的提交。

感谢您的帮助，感谢您的宝贵时间。

我当前的代码：

payment.blade.php

<form action="{{'/users/payment'}}" method="post" id="checkout-form">

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();
    }
}

});

Answer 1

只需更改表单选择器

var $form = $("form");

然后

$form.submit(function(){
  //Every form submit will trigger this function
});

访问表单的子元素

$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();      
});

如何从具有多个表单的页面捕获表单提交

How to capture form submit from a page that has multiple forms

jquery

forms

laravel

submit

capture