1

Tenho este código Jquery:

<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>

E este 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 -->

Precisava que após cada click aparecesse o modal acima, e no terceiro click, redirecionasse o usuario para uma página. O modal funciona, porem os eventos (click) do jquery não.

7
  • está incrementando corretamente a variável totalClicks? Commented 6/03/2018 às 16:37
  • Teoricamente sim. Ele pega o click pelo jQuery('#addpayment').submit(function() e alimenta em totalClicks++;. Posso estar enganado, mas acredito que esteja certo. A não ser que o problema esteja na chamada do Modal quebrando esta função.
    – user54154
    Commented 6/03/2018 às 16:39
  • tenta colocar um console.log(totalClicks) ou um alert(totalClicks), pode ser que ele esteja resetando o seu contador Commented 6/03/2018 às 16:43
  • Coloquei o alerta (alert(totalClicks)) dentro do jQuery('#addpayment').submit(function(){, porem só abre o modal, parece que nem entra na função.
    – user54154
    Commented 6/03/2018 às 16:52
  • não incrementa, não... está fora da function do submit ele soma no document ready e só Commented 6/03/2018 às 17:03

2 Respostas 2

0

Primeira coisa a observar é: se você submeter o formulário, a variável totalClicks será perdida, porque irá ou recarregar a página atual ou ir para outra página.

Se for usar Ajax no submit, tem que colocar o método e.preventDefault(); para impedir o recarregamento da página.

Abaixo, reorganizei o código para funcionar o redirecionamento após o terceiro click no botão Enviar.

O que foi feito?

Quando o valor da variável totalClicks for igual a 1, foi removido o valor do atributo data-toggle do botão, impedindo que a modal abra novamente, e no próximo click ocorrerá o redirecionamento.

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>

7
  • Dvd, entao possívelmente meu form está se atualizando e deixando de incrementar a minha variavel? Pois seu modal funcionou legal, mas meu form continua só abrindo o Modal sem o redir.
    – user54154
    Commented 6/03/2018 às 17:32
  • Sim. Como eu disse, ao submeter o formulário, a página estava se atualizando, voltando tudo ao início. Explique melhor o que vc quer que faça.
    – Sam
    Commented 6/03/2018 às 17:36
  • Tenho meu form e nele um botao de enviar. Ao clicar neste botao de enviar, ele chamará o modal com um texto especifico. Após chamar este modal 2 vezes, na terceira redirecionar para uma pagina. Você fez redirecionar pela janela modal, preciso que seja pelo meu form.
    – user54154
    Commented 6/03/2018 às 17:38
  • @user54154 onde está o código que abre a modal? Provavelmente está antes do if (totalClicks >= 2) {, logo vai sempre abrir a modal, não importa o valor de totalClicks . Commented 6/03/2018 às 17:41
  • @Filipe, o modal está amarrado com o botão "enviar" através de (data-toggle="modal" data-target="#myModal"). Tem um ID no modal chamado #myModal. Creio que seja o problema que o DVD disse, pois ele usou o mesmo codigo que eu tenho e funcionou, porem o botão que faz o redir é o que esta no modal, não se atualizando quando clica em "enviar".
    – user54154
    Commented 6/03/2018 às 17:45
0

De acordo com o exemplo, o incremento da variável totalClicks está fora do escopo da função anônima, logo quando ocorre o evento submit o valor não é incrementado.

O correto seria:

<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>
1
  • inseri sua sugestão, porem mesmo assim ele só chama o modal (popup), se eu clicar 10 vezes, ele abre 10 vezes o modal, não entrando na função.
    – user54154
    Commented 6/03/2018 às 17:13

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 .