Calling function after opening Modal

Question

I have this Jquery code:

<script>
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("redirecionando");
       windows.location......
            return false;   
    }

}


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

});

</script>

And this modal:

<form action="" method="post" id="addpayment" name="addpayment" class="form-
 horizontal">

<!-- Modal -->

<div class="container">

  <!-- Trigger the modal with a button -->



  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h6 class="modal-title">Teste - Modal </h6>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

</div>

<!--Fim Modal -->

It needed that after each click appeared the modal above, and in the third click, redirected the user to a page. Modal works, but jquery events (click) do not.

Answer 1

According to the example, the variable increment totalClicks is outside the scope of the anonymous function, just when the event occurs submit the value is not incremented.

The right thing would be:

<script>
  // Numero de click
  var totalClicks = 0;

  jQuery(document).ready(function(){
      jQuery('#addpayment').submit(function(){
          e.preventDefault();
          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("redirecionando");
              windows.location......
              return false;   
          }

          //Soma o valor de totalClicks + 1
          totalClicks++;
      }
  });
</script>

Answer 2

First thing to note is: if you submit the form, the variable totalClicks will be lost because it will either reload the current page or go to another page.

If you are going to use Ajax on Submit, have to put the method e.preventDefault(); to prevent page reloading.

Below, I reorganized the code to work the redirect after the third click on the button Send.

What has been done?

When the variable value totalClicks is equal to 1, the attribute value has been removed data-toggle from the button, preventing the modal to open again, and at the next click the redirect will occur.

jQuery(document).ready(function(){

// Numero de click
   var totalClicks = 0;

   jQuery('#addpayment').submit(function(e){
      e.preventDefault();

      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("redirecionando");
        window.location = "alguma_página";
         return false;   
      }else if(totalClicks == 1){
         $("button[data-toggle='modal']").attr("data-toggle","");
      }

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<form action="" method="post" id="addpayment" name="addpayment" class="form- horizontal">

   <!-- Modal -->

   <div class="container">

      <!-- Trigger the modal with a button -->

      <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
         Enviar
      </button>

      <!-- Modal -->
      <div class="modal fade" id="myModal" role="dialog">
         <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
               <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                  <h6 class="modal-title">Teste - Modal </h6>
               </div>
               <div class="modal-body">
                  Corpo da modal
               </div>
               <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
               </div>
            </div>
         </div>
      </div>
   </div>
</form>