我在表单上有一个按钮,可以在验证数据后将页面重定向到另一个网站。仅当这些数据经过验证时,按钮的href才具有信息,否则它将为null。
问题在于,即使一切正常运行,要使用户重定向到页面,也需要单击两次按钮,而我不知道为什么。
我传递了html表单的格式,该函数先验证数据,然后再捕获数据的部分并填充按钮的href。所有这些都以非常概括的方式与相关内容有关。
FORM HTML:
<form id="formTarjeta" class="formPayu" onsubmit="return registroCompraTarjeta()">
<p><strong>Dirección de envío</strong></p>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-home"></i>
</span>
<input type="text" class="form-control" id="registroDireccionTarjeta" name="registroDireccionTarjeta" placeholder="BUSQUE y SELECCIONE su dirección" required>
</div>
</div>
<div class="clearfix"></div>
<a class="btn btn-block btn-lg btn-default backColor btnPayu" id="load" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> PROCESANDO">CONFIRMAR DATOS</a>
</form>
JS中的验证功能
function registroCompraTarjeta(){
var direccionTarjeta = $("#registroDireccionTarjeta").val();
if(direccionTarjeta == ""){
swal('WARNING', 'warning');
return false; }
return true;
}
数据捕获和更改HREF按钮
$("#formTarjeta").on('click','.btnPayu',function(e){
if (registroCompraTarjeta() == true) {
//CAPTURE DATA FORM AND CREATE AN ARRAY TO SEND BY AJAX
if(...){
$.ajax({
url:"ajax/cart.ajax.php",
method:"POST",
data: array,
cache: false,
contentType: false,
processData: false,
success:function(response){
$('.btnPayu').attr('href', response);
$('.btnPayu').on('click', function() {
var $this = $(this);
$this.button('loading');
setTimeout(function() {
$this.button('reset');
}, 4000);
});
}
})
} else {
...
}
}
答案 0 :(得分:1)
问题是AJAX请求正在异步运行。直到完全处理完click事件后,它才会更改href
,因此不会影响该点击的处理方式。
代替更改href
,而是分配给window.location
来重定向到新页面。
$.ajax({
url: "ajax/cart.ajax.php",
method: "POST",
data: array,
cache: false,
contentType: false,
processData: false,
success: function(response) {
window.location = response;
}
})