[英]How to split a form data and assign to another values with jQuery?
I want to create a stripe.js form, first the data should be validated client-side then submitted to stripe.js to get token. 我想创建一个stripe.js表单,首先应在客户端验证数据,然后将其提交给stripe.js以获取令牌。 Here is my full source code:
这是我的完整源代码:
<!DOCTYPE html><html>
<head>
<?php
print_r($_POST);
?>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script type="text/javascript" src="jquery.payment.js"></script>
<style type="text/css" media="screen">
.has-error input {
border-width: 2px;
}
.validation.text-danger:after {
content: 'Validation failed';
}
.validation.text-success:after {
content: 'Validation passed';
}
</style>
<script type="text/javascript">
jQuery(function($) {
$('[data-numeric]').payment('restrictNumeric');
$('.cc-number').payment('formatCardNumber');
$('.cc-exp').payment('formatCardExpiry');
$('.cc-cvc').payment('formatCardCVC');
$.fn.toggleInputError = function(erred) {
this.parent('.form-group').toggleClass('has-error', erred);
return this;
};
$('button[type="submit"]').click(function(e){
e.preventDefault();
var cardType = $.payment.cardType($('.cc-number').val());
$('.cc-number').toggleInputError(!$.payment.validateCardNumber($('.cc-number').val()));
$('.cc-exp').toggleInputError(!$.payment.validateCardExpiry($('.cc-exp').payment('cardExpiryVal')));
$('.cc-cvc').toggleInputError(!$.payment.validateCardCVC($('.cc-cvc').val(), cardType));
$('.cc-brand').text(cardType);
$('.validation').removeClass('text-danger text-success');
if ($('.has-error').length) { $('.validation').addClass('text-danger') } else { $('form').submit(); }
});
});
Stripe.setPublishableKey('pk_test_***');
jQuery(function($) {
$('#payment-form').submit(function(event) {
var $form = $(this);
// Disable the submit button to prevent repeated clicks
$form.find('button').prop('disabled', true);
Stripe.card.createToken($form, stripeResponseHandler);
// Prevent the form from submitting with the default action
return false;
});
});
function stripeResponseHandler(status, response) {
var $form = $('#payment-form');
if (response.error) {
// Show the errors on the form
$form.find('.payment-errors').text(response.error.message);
$form.find('button').prop('disabled', false);
} else {
// response contains id and card, which contains additional card details
var token = response.id;
// Insert the token into the form so it gets submitted to the server
$form.append($('<input type="hidden" name="stripeToken" />').val(token));
// and submit
$form.get(0).submit();
}
};
</script>
</head>
<body>
<div class="container">
<form action="" method="post" id="payment-form" novalidate autocomplete="on">
<span class="payment-errors"></span>
<div class="form-group">
<label for="cc-number" class="control-label">Card number:<small class="text-muted">[<span class="cc-brand"></span>]</small></label>
<input id="cc-number" data-stripe="number" type="tel" class="input-lg form-control cc-number" autocomplete="cc-number" placeholder="•••• •••• •••• ••••" required class="col-md-2">
</div>
<div class="form-group">
<label for="cc-exp" class="control-label">Card expiry:</label>
<input id="cc-exp" type="tel" class="input-lg form-control cc-exp" autocomplete="cc-exp" placeholder="•• / ••" required class="col-md-2">
</div>
<div class="form-group">
<label for="cc-cvc" class="control-label">CVC:</label>
<input id="cc-cvc" data-stripe="cvc" type="tel" class="input-lg form-control cc-cvc" autocomplete="off" placeholder="•••" required class="col-md-2">
</div>
<button type="submit" class="btn btn-lg btn-primary">Submit</button>
<h4 class="validation"></h4>
</form>
</div>
</body>
</html>
This form for expiry uses just one field and it will be submitted as mm/yy to validator, validator works fine but after successfull validation, I want to split mm/yy separated and assign each of them to data-stripe="exp-month"
and data-stripe="exp-year"
respectively before submitting to stripe.js as those two data-stripe="exp-month"
and data-stripe="exp-year"
are required by stripe.js. 此到期表仅使用一个字段,它将以mm / yy的形式提交给验证器,验证器工作正常,但是在成功验证之后,我想将mm / yy分开,并将它们分别分配给
data-stripe="exp-month"
和data-stripe="exp-year"
分别提交给stripe.js,因为stripe.js需要这两个data-stripe="exp-month"
和data-stripe="exp-year"
。
for validator I use this 3rd party script: https://github.com/stripe/jquery.payment/tree/master/lib I see it has already a feature to split mm and yy here https://github.com/stripe/jquery.payment#paymentcardexpiryvalstring-and-fnpaymentcardexpiryval , but I have no idea how to use that function to split fom expiry date and assign them to data-stripe="exp-month"
and data-stripe="exp-year"
Please advice how can I do this? 对于验证器,我使用此第三方脚本: https : //github.com/stripe/jquery.payment/tree/master/lib我看到它已经具有在此处拆分mm和yy的功能https://github.com/stripe /jquery.payment#paymentcardexpiryvalstring-and-fnpaymentcardexpiryval ,但是我不知道如何使用该函数来分割fom的到期日期并将它们分配给
data-stripe="exp-month"
和data-stripe="exp-year"
建议我该怎么做?
Stripe.js can accept expiry dates as a single argument: https://stripe.com/docs/stripe.js#passing-exp-dates Stripe.js可以接受有效期限作为单个参数: https ://stripe.com/docs/stripe.js#passing-exp-dates
So you don't need to split the date. 因此,您无需拆分日期。 Just adding
data-stripe="exp"
to the cc-exp
field should do the trick: 只需在
cc-exp
字段中添加data-stripe="exp"
即可达到目的:
<input id="cc-exp" data-stripe="exp" type="tel" class="input-lg form-control cc-exp" autocomplete="cc-exp" placeholder="•• / ••" required class="col-md-2">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.