Accountant with Ajax

Question

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

I have the code below, that when we perform a Submit in a form, it calls this ajax, and executes the predefined processes.

I wonder if after 3 events (clicks) the 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>
<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>

Answer 1

Just create a global variable and add or compare the value.

Actually this is not done with Ajax but with Javascript. The Ajax is just a jQuery function that serves to make 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>
<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>

Summary:

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

The element that will receive the events is the send button. It will be responsible for verifying the number of clicks, redirect the page and send the data via POST.

Functioning:

1. In var totalClicks = 0; we have defined that when the page load is completed, the click value will be 0
2. The button Enviar receives the event of submit
3. When the button receives this event, we make a comparison with if (totalClicks >= 2) {. In this case I used the number two because only then do the total sum of clicks.
4. Along those lines totalClicks++; we add the number of clicks. This is equivalent to totalClicks = totalClicks + 1;