Run ajax on page with more than one form

Question

Run ajax on page with more than one form

Navigation

#1 by (0 votes)

0

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

jquery ajax

asked by anonymous 16.03.2018 / 21:07

1 answer

Spinner Json and ArrayList How to do nonlinear regression in R using the nls function?

score 0 · Accepted Answer

The problem is in the form selector.

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

Try it out:

This will take all forms of the document:

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

Get the form id that triggered the event:

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

Within your script, in the form call, you can do so directly:

var form = $(this);

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

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

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

After this, once inside the executed event, you can get the element through the $(this) variable. That is, the form you were looking for and setting it to var form =$('#quitar_debito'); , is exactly $(this) . You can var form = $(this) that will give it.

Notice that this is just one of the possible solutions.