Counter with Ajax

1

Is there any way to create a counter type with Ajax?

I have the following code, which when we make a submit in a form, it calls this ajax, and executes the pre-defined processes.

I would like to know if after 3 events (clicks) ajax direct the user to another page.

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><formaction="#" 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>
    
asked by anonymous 20.12.2017 / 22:05

1 answer

2

Just create a global variable and go by adding or comparing the value.

In fact this is not done with Ajax and yes with Javascript. The Ajax is just a jQuery function that is used to make the requests.

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><formaction="#" 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>

Summary:

The totalClicks variable does not receive the click event. It will only receive the number of clicks.

The element that will receive the events is the submit button. It will be responsible for checking the number of clicks, redirecting the page and sending the data via POST.

Operation:

  • As a% of% we define that upon completion of page loading, the click value will be equal to 0
  • The var totalClicks = 0; button receives the Enviar
  • When the button receives this event, we make a comparison with submit . In that case I used number two because only then do I total sum of clicks.
  • In this line if (totalClicks >= 2) { we add the number of clicks. This is equal to totalClicks++;
  • 20.12.2017 / 23:43