时间戳

首页 > 解决方案 > 如果我单击一下，按钮不会重定向到链接

javascript - 如果我单击一下，按钮不会重定向到链接

问题描述

验证数据后，我在表单上有一个按钮，可将页面重定向到另一个网站。只有在验证了这些数据时，按钮的 href 才具有信息，否则将为空。

问题是，即使一切运行正常，用户要被重定向到页面，也需要在按钮上单击两次，我不知道为什么。

我传递了html表单的格式，验证数据的函数，然后是捕获数据的部分和填充按钮的href。所有这一切都以非常概括的方式与相关的事情。

表单 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 {
                ... 
        }

    }

标签： javascriptjqueryhtmlajax

解决方案

问题是 AJAX 请求是异步运行的。直到点击事件被完全处理后它才会改变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;
  }
})

推荐阅读