Show Ajax Output in each div

Question

I’m not getting Ajax to show the result in the corresponding div, I’m doing so $('.resultado_debito'+formID).html(data);, but it doesn’t work.

Code:

$(document).ready(function() {
 $("form").submit(function() {
 // Getting the form ID
 var  formID = $(this).attr('id');
 var formDetails = $('#'+formID);
 $.ajax({
 type: "POST",
 url: 'enviar_pagamento.php',
 data: formDetails.serialize(),
 success: function (data) { 
 // Inserting html into the result div
 $('.resultado_debito'+formID).html(data);
 },
 error: function(jqXHR, text, error){
            // Displaying if there are any errors
             $('.resultado_debito'+formID).html(error);           
        }
    });
 return false;
 });
});

HTML:

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

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

   <input type="hidden" name="id_empresa_pagamento" value="3" class="id_empresa_pagamento">

   <input type="submit" value="Quitar débito">

   <div class="resultado_debito0"></div>

</form>

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

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

   <input type="hidden" name="id_empresa_pagamento" value="3" class="id_empresa_pagamento">

   <input type="submit" value="Quitar débito">

   <div class="resultado_debito2"></div>

</form>


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

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

   <input type="hidden" name="id_empresa_pagamento" value="3" class="id_empresa_pagamento">

   <input type="submit" value="Quitar débito">

   <div class="resultado_debito3"></div>

</form>

Answer 1

It turns out you’re generating resultado_debitoquitar_debito3, so you’re not getting.

How are you capturing the ID of the form and it consists of quitar_debitoX, for example, it makes no sense to repeat the _debito when trying to display the error (and it is also necessary to remove the settle_).

Example:

$(document).ready(function() {
    $("form").submit(function() {

        //Remove a palavra quitar_ e deixa somente "debitoX"
        const formID = $(this).attr('id').replace("quitar_", "");

        //Captura o elemento que sofreu o evento de "submit"
        const formDetails = $(this);

        $.ajax({
            type: "POST",
            url: 'enviar_pagamento.php',
            data: formDetails.serialize(),
            success: function (data) { 
                // Inserting html into the result div
                $('.resultado_'+formID).html(data);
            },
            error: function(jqXHR, text, error){
                // Displaying if there are any errors
                $('.resultado_'+formID).html(error);           
            }
        });
        return false;
    });
});