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