如何解决如何阻止客户单击 Ajax 表单按钮两次？
我们有一个 opencart 网站 (v 2.0.3.1) 并且正在使用 worldpay 支付模块。
客户在流程结束时多次点击结帐按钮，然后页面才能将他们重定向到我们的成功页面。这会为同一个购物车创建多个订单并每次收取费用。
如何阻止按钮在重定向之前多次提交表单？
<?PHP if (!empty($existing_cards)) { ?>
<legend><?PHP echo $text_credit_card; ?></legend>
<div class="form-horizontal">
<div id="choose-card" class="form-group">
<label class="col-sm-2 control-label"><?PHP echo $entry_card; ?></label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="existing-card" value="1" checked="checked"/>
<?PHP echo $entry_card_existing; ?>
</label>
<label class="radio-inline">
<input type="radio" name="existing-card" value="0"/>
<?PHP echo $entry_card_new; ?>
</label>
</div>
</div>
</div>
<form id="payment-existing-form" action="<?PHP echo $form_submit; ?>" method="post" class="form-horizontal">
<fieldset>
<div id="card-existing">
<div class="form-group required">
<label class="col-sm-2 control-label" for="token"><?PHP echo $entry_cc_choice; ?></label>
<div class="col-sm-10">
<select name="token" data-worldpay="token" class="form-control">
<?PHP foreach ($existing_cards as $existing_card) { ?>
<option value="<?PHP echo $existing_card['token']; ?>"><?PHP echo $text_card_type . ' ' . $existing_card['type']; ?>,<?PHP echo $text_card_digits . ' ' . $existing_card['digits']; ?>,<?PHP echo $text_card_expiry . ' ' . $existing_card['expiry']; ?></option>
<?PHP } ?>
</select>
</div>
</div>
<div class="buttons clearfix">
<div class="pull-right">
<input type="button" value="<?PHP echo $button_delete_card; ?>" id="button-delete" data-loading-text="<?PHP echo $text_loading; ?>" class="btn btn-primary" />
</div>
</div>
<div class="form-group required">
<label class="col-sm-2 control-label" for="input-cc-cvc"><?PHP echo $entry_cc_cvc; ?></label>
<div class="col-sm-10">
<input type="text" data-worldpay="cvc" value="" size="4" placeholder="<?PHP echo $entry_cc_cvc; ?>" id="input-cc-cvc" class="form-control" />
</div>
</div>
</div>
</fieldset>
<div class="buttons">
<div class="pull-right">
<input type="submit" value="<?PHP echo $button_confirm; ?>" id="button-confirm" data-loading-text="<?PHP echo $text_loading; ?>" class="btn btn-primary" />
</div>
</div>
</form>
<form style="display: none" id="payment-new-form" action="<?PHP echo $form_submit; ?>" method="post" class="form-horizontal">
<?PHP } else { ?>
<form id="payment-new-form" action="<?PHP echo $form_submit; ?>" method="post" class="form-horizontal">
<?PHP } ?>
<fieldset>
<div class="form-group">
<div class="col-sm-11" id='paymentDetailsHere' style="margin-left: 3%"></div>
</div>
<?PHP if ($worldpay_card) { ?>
<div class="form-group">
<label class="col-sm-2 control-label" for="input-cc-save"><?PHP echo $entry_card_save; ?></label>
<div class="col-sm-2">
<input type="checkBox" name="save-card" value=true id="input-cc-save"/>
</div>
</div>
<?PHP } ?>
</div>
</fieldset>
<div class="buttons">
<div class="pull-right">
<input type="submit" value="<?PHP echo $button_confirm; ?>" id="button-confirm" data-loading-text="<?PHP echo $text_loading; ?>" class="btn btn-primary" />
</div>
</div>
</form>
<div id="payment-errors">
</div>
<script type="text/javascript"><!--
//Load Worldpay.js and run script functions
$.getScript("<?PHP echo $worldpay_script; ?>",function (data,textStatus,jqxhr) {
Worldpay.setClientKey("<?PHP echo $worldpay_client_key; ?>");
// disable new card form if existing cards
<?PHP if (!empty($existing_cards)) { ?>
$('#payment-new-form :input').prop('disabled',true);
<?PHP } ?>
// Set if token is reusable,remove first value when Worldpay update
Worldpay.reusable = true;
<?PHP if (isset($recurring_products)) { ?>
Worldpay.reusable = true;
<?PHP } else { ?>
$('input[name=\'save-card\']').on('change',function () {
if ($(this).is(':checked')) {
Worldpay.reusable = true;
} else {
Worldpay.reusable = false;
}
});
<?PHP } ?>
Worldpay.templateSaveButton = false;
Worldpay.useTemplate('payment-new-form','paymentDetailsHere','inline',function (obj) {
var _el = document.createElement('input');
_el.value = obj.token;
_el.type = 'hidden';
_el.name = 'token';
document.getElementById('payment-new-form').appendChild(_el);
});
//Submit form
$('input[type=\'submit\']').on('click',function () {
var existing = $('input[name=\'existing-card\']:checked').val();
if (existing === '1') {
var form = document.getElementById('payment-existing-form');
Worldpay.useForm(form,function (status,response) {
if (response.error || status != 200) {
Worldpay.handleError(form,document.getElementById('payment-errors'),response.error);
} else {
form.submit();
}
},true);
} else {
Worldpay.submitTemplateForm();
}
});
});
//Delete a card
$('#button-delete').on('click',function () {
var token = $('select[name=\'token\'] option:selected');
if (confirm('<?PHP echo $text_confirm_delete ?>\n' + token.text())) {
$.ajax({
url: 'index.PHP?route=payment/worldpay/deleteCard',type: 'post',data: {token: token.val()},dataType: 'json',beforeSend: function () {
$('#button-delete').button('loading');
},complete: function () {
$('#button-delete').button('reset');
},success: function (json) {
if (json['error']) {
alert(json['error']);
}
if (json['success']) {
alert(json['success']);
if (json['existing_cards']) {
token.remove();
} else {
$('input[name=\'existing-card\'][value=0]').click();
$('#choose-card').remove();
$('#payment-existing-form').remove();
}
}
}
});
}
});
// enable or disable forms based on exiting or new card option
$('input[name=\'existing-card\']').on('change',function () {
if (this.value === '1') {
$('#payment-existing-form').show();
$('#payment-new-form').hide();
$('#payment-new-form :input').prop('disabled',true);
$('#payment-existing-form :input').prop('disabled',false);
} else {
$('#payment-existing-form').hide();
$('#payment-new-form').show();
$('#payment-new-form :input').prop('disabled',false);
$('#payment-existing-form :input').prop('disabled',true);
}
});
});
//--></script>
解决方法
尝试禁用点击提交按钮。
$('#button-confirm').click(function(){
$(this).attr('disabled');
});
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
