0

Tenho esse código Ajax que faz a requisição para um arquivo PHP, quando tem um só formulário na pagina, ele funciona certinho.

Como faço para o funcinar quando tem mais de um formulário?

JS que funciona

$(document).on("submit", "#quitar_debito", function(event)
{
    $(".resultado_debito").html('<div class="spinner"></div>');
            event.preventDefault(); 
var form = $('#quitar_debito');
            $.ajax({
                url: 'enviar_pagamento.php',
                type: 'POST',
                data: form.serialize() 
            })
            .done(function(data){
                $('.resultado_debito').fadeOut('slow', function(){
                    $('.resultado_debito').fadeIn('slow').html(data);
                });
            })
            .fail(function(){
                alert('Ajax Submit Failed ...');    
            });
}); 

HTML que funciona

<form method="post" id="quitar_debito" novalidate="novalidate">

   <input type="hidden" name="pagamento" value="" size="sim" class="pagamento">

   <input type="hidden" name="id_empresa_pagamento" value="<?php echo $row["id"]?>" class="id_empresa_pagamento">

   <input type="submit" value="Cadastrar">

</form>

Html do formulário na mesma página que não funciona

    <div class="resultado_debito_0">
  <form method="post" id="quitar_debito_0" novalidate="novalidate">

   <input type="hidden" name="pagamento" value="" size="sim" class="pagamento">

   <input type="hidden" name="id_empresa_pagamento" value="<?php echo $row["id"]?>" class="id_empresa_pagamento">

   <input type="submit" value="Cadastrar">

</form>
</div>


    <div class="resultado_debito_1">
  <form method="post" id="quitar_debito_1" novalidate="novalidate">

   <input type="hidden" name="pagamento" value="" size="sim" class="pagamento">

   <input type="hidden" name="id_empresa_pagamento" value="<?php echo $row["id"]?>" class="id_empresa_pagamento">

   <input type="submit" value="Cadastrar">

</form>
</div>


    <div class="resultado_debito_2">
  <form method="post" id="quitar_debito_2" novalidate="novalidate">

   <input type="hidden" name="pagamento" value="" size="sim" class="pagamento">

   <input type="hidden" name="id_empresa_pagamento" value="<?php echo $row["id"]?>" class="id_empresa_pagamento">

   <input type="submit" value="Cadastrar">

</form>
</div>

js com problema

$(document).on("submit", "form", function(event)
{
    $(".resultado_debito").html('<div class="spinner"></div>');
            event.preventDefault(); 

var form_data = new FormData(); 
var id = $(this).attr('id');
            $.ajax({
                url: 'enviar_pagamento.php',
                type: 'POST',
                data: form_data
            })
            .done(function(data){
                $('.resultado_debito').fadeOut('slow', function(){
                    $('.resultado_debito').fadeIn('slow').html(data);
                });
            })
            .fail(function(){
                alert('Ajax Submit Failed ...');    
            });
});
3
  • O que acontece depois que da submit? Da erro? Qual o .js que da pau e o que quer fazer? Seu js só pega o submit de um form... Commented 16/03/2018 às 20:14
  • isso o meu só pega de um, como faria para pegar em mais de um formulário? Commented 16/03/2018 às 20:14
  • O problema ai é que você esta pegando ele pelo ID, e assim so pega um mesmo. Precisa pegar pela class, por exemplo. Ou simplesmente pegar o element form. Commented 16/03/2018 às 20:22

1 Resposta 1

0

O problema esta no seletor do form.

$(document).on("submit", "#quitar_debito", function(event)

Experimente:

Isso pegará todos os forms do documento:

$(document).on("submit", "form", function(event)

Pegue o id do form que disparou o evento:

var id = $(this).attr('id')

Dentro do seu script, na chamada do form, você pode fazer assim direto:

var form = $(this);

Edit Explicativo: O atributo ID faz literalmente o elemento ter uma identificação única no HTML. Logo, o seletor por id não retorna um array de elementos, apenas um.

Para resolver seu caso, você poderia utilizar por class, pois classe sim retornam um array no seletor.

Minha sugestão foi para você pegar de fato o elemento form, independente de sua identificação.

Após isso, uma vez estando dentro do evento executado, você pode obter o elemento através da variável $(this). Ou seja, o form que você estava buscando e o definindo a var form =$('#quitar_debito');, é exatamente o $(this). Pode fazer var form = $(this) que dará na mesma.

Perceba que é apenas uma das soluções possíveis.

7
  • fiz isso, mais só que assim ele mostra resultado em todos os formulário, pois o id para mostrar o resultado tem que mudar de form para form Commented 16/03/2018 às 20:25
  • Então voce vai precisar pegar o $(this).attr('id') do form dentro da chamada e usar este id. Commented 16/03/2018 às 20:26
  • como eu faria isso no meu código? Commented 16/03/2018 às 20:27
  • Veja se a ediçao te ajuda Commented 16/03/2018 às 20:36
  • Wagner, simplifiquei um pouco a resposta. Acho que agora voce vai entender Commented 16/03/2018 às 20:47

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 .