1

Existe alguma forma de criar um tipo de contador com Ajax?

Tenho o código abaixo, que ao efetuarmos um submit em um form, ele chama este ajax, e executa os processos pré definidos.

Gostaria de saber se após 3 eventos (clicks) o ajax direcionar o usuário para outra página.

jquery:

jQuery(document).ready(function(){
        jQuery('#addpayment').submit(function(){
            var dados = jQuery( this ).serialize();

            jQuery.ajax({
                type: "POST",
                url: "redir.php",
                data: dados,
                success: function envio()
                {    
                     var cont = "Pagamento realizado.";
                     document.getElementById("sucesso").style.color="#FF0000";
                     document.getElementById("sucesso").innerHTML = cont ;
                     setTimeout(function() {
                     document.getElementById("sucesso").style.display="none";},3000);
                     document.getElementById("sucesso").style.display="inline"



                }

            });

            return false;
        });
    });

html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="post" id="addpayment" name="addpayment" class="form-horizontal">
    <fieldset>


    <!-- Button -->
    <div class="form-group" align="center" >
      <label class="col-md-4 control-label" for="singlebutton"></label>
      <div class="col-md-4">
       <input type="submit" name="submit" id="submit" class="btn btn-success"  value="Enviar" >
       </form>
       <div id=sucesso></div>
      </div>
    </div>

    </fieldset>
4
  • Você quer que, quando o usuário clicar 3 vezes no botão "Enviar", ele seja redirecionado para outra página? Commented 20/12/2017 às 21:55
  • Uai, faz uma variavel normal e vai incrementando-a a cada clique. Quando tiver 3 redireciona o cara com o window.href.
    – Francisco
    Commented 20/12/2017 às 21:57
  • @valdeir, sim exatamente.
    – user54154
    Commented 20/12/2017 às 22:13
  • @Francisco, minha dificuldade é esta. Gerar um contador (variável e ir incrementando). Não conheço muito a sintaxe do Ajax.
    – user54154
    Commented 20/12/2017 às 22:15

1 Resposta 1

2

Basta criar uma variável global e ir somando ou comparando o valor.

Na verdade isso não é feito com Ajax e sim com Javascript. O Ajax é apenas uma função do jQuery que serve para fazer as requisições.

Jquery:

jQuery(document).ready(function(){

      // Numero de click
      var totalClicks = 0;

        jQuery('#addpayment').submit(function(){
            var dados = jQuery( this ).serialize();

        // Verifica se o valor da variável totalClicks representa 3 clicks.
        // Caso o número seja menor que 3 clicks, ignora esse trecho
        if (totalClicks >= 2) {
            alert("Você será redirecionado");

            // Aqui você coloca toda a função que você quer que o algoritmo faça ao completar os 3 cliks

            window.location.href = "https://www.example.com/nova_pagina.html" //Essa linha vai redirecionar o usuário para "https://www.example.com/nova_pagina.html"

            return false;
        }

        // Aqui você coloca toda a função que você quer que o algoritmo faça antes de completar os 3 cliks

        //Soma o valor de totalClicks + 1
        totalClicks++;

            jQuery.ajax({
                type: "POST",
                url: "redir.php",
                data: dados,
                success: function envio()
                {    
                     var cont = "Pagamento realizado.";
                     document.getElementById("sucesso").style.color="#FF0000";
                     document.getElementById("sucesso").innerHTML = cont ;
                     setTimeout(function() {
                     document.getElementById("sucesso").style.display="none";},3000);
                     document.getElementById("sucesso").style.display="inline"



                }

            });

            return false;
        });
    });

html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="post" id="addpayment" name="addpayment" class="form-horizontal">
    <fieldset>


    <!-- Button -->
    <div class="form-group" align="center" >
      <label class="col-md-4 control-label" for="singlebutton"></label>
      <div class="col-md-4">
       <input type="submit" name="submit" id="submit" class="btn btn-success"  value="Enviar" >
       </form>
       <div id=sucesso></div>
      </div>
    </div>

    </fieldset>

Resumo:

A variável totalClicks não recebe o evento de click. Ela apenas irá receber o número de cliques.

O elemento que irá receber os eventos, é o botão de enviar. Ele ficará responsável por verificar o número de cliques, redirecionar a página e enviar os dados via POST.

Funcionamento:

  1. Em var totalClicks = 0; definimos que, ao completar o carregamento da página, o valor de clique será igual a 0
  2. O botão Enviar recebe o evento de submit
  3. Quando o botão recebe esse evento, nós fazemos uma comparação com if (totalClicks >= 2) {. Nesse caso utilizei o número dois porque somente depois faço a soma total de cliques.
  4. Nessa linha totalClicks++; somamos o número de cliques. Isso equivale à totalClicks = totalClicks + 1;
4
  • grato pela ajuda. !
    – user54154
    Commented 20/12/2017 às 23:03
  • funcionou como esperado. Gostaria de entender apenas como que esta variável (totalclicks) recebe o evento do click. Grato
    – user54154
    Commented 21/12/2017 às 13:55
  • @user54154 adicionei um resumo e o funcionamento. Commented 21/12/2017 às 18:34
  • @grato Valdeir.
    – user54154
    Commented 22/12/2017 às 14:01

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .