如果单击一下,该按钮不会重定向到链接

时间:2019-02-28 00:04:25

标签: javascript jquery html ajax

我在表单上有一个按钮,可以在验证数据后将页面重定向到另一个网站。仅当这些数据经过验证时,按钮的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 {
                ... 
        }

    }

1 个答案:

答案 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;
  }
})