I have this Ajax code that makes the request for a PHP file, when there is only one form on the page, it works correctly.
How do I work when I 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>
Html form on same page that does not 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 ...');
});
});