Show Ajax result in each div

Question

Show Ajax result in each div

Navigation

#1 by (1 votes)

0

I'm not able to make Ajax show the result in the corresponding div, so I'm doing $('.resultado_debito'+formID).html(data); , but it does not 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>

ajax

asked by anonymous 17.03.2018 / 11:33

1 answer

Submit a POST request with java Name of the dynamic attribute in Post Jquery

score 1 · Accepted Answer

It turns out that you're generating resultado_debitoquitar_debito3 , so you're not getting it.

Since you are capturing the ID of the form and it is composed of quitar_debitoX , for example, it does not make sense to repeat the _debito when trying to display the error (and also it is necessary to remove the / em>).

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