Execute ajax on page with more than one form

Question

I have this Ajax code that makes the request for a PHP file, when there is only one form on the page, it works right.

How do I make it work when you have more than one form?

JS that works

$(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 that works

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

Form html on the same page that doesn’t work

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

$(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 ...');    
            });
});

Answer 1

The problem is in the form selector.

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

Try:

This will take all the forms in the document:

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

Take the id of the form that triggered the event:

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

Inside your script, in the form call, you can do so direct:

var form = $(this);

Explanatory Edit: The ID attribute literally makes the element have a unique identification in HTML. So, the id selector does not return an array of elements, just one.

To solve your case, you could use per class, because yes class returns an array in the selector.

My suggestion was for you to actually take the form element, regardless of its identification.

After that, once you are inside the executed event, you can get the element through the variable $(this). That is, the form you were looking for and defining the var form =$('#quitar_debito');, is exactly the $(this). Can do var form = $(this) that will still.

Realize that it is only one of the possible solutions.