如何从具有多个表单的页面捕获表单提交
How to capture form submit from a page that has multiple forms
我有一个包含发票的 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();
}
}
});
只需更改表单选择器
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();
});
我有一个包含发票的 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();
}
}
});
只需更改表单选择器
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();
});