How to send and process N separate forms with ajax without refreshing the page?

Asked

Viewed 733 times

5

How to do when you have N forms with same ID, or CLASS send the data (Submit) process and when finished processing change the color of the <'tr bgcolor="#FFFF00"'> for green '#00FF00' signaling that the process has been completed. obs. All this has to happen without giving refresh (without updating) on the page and using .

    <table width="900" border="0" cellspacing="0" cellpadding="0">
        <tr bgcolor="#FFFF00">
            <td>
                <form id="NOME-PADRÃO">
                    <fieldset>
                        nome:
                      <input type="text" id="nome" placeholder="Nome" />
                        e-mail
                        <input type="text" id="email" placeholder="Email" />
                        <input type="submit" id="enviar" placeholder="Enviar" />
                    </fieldset>
                </form>    
            </td>
      </tr>
        <tr bgcolor="#FFFF00">
            <td>
                <form id="NOME-PADRÃO">
                    <fieldset>
                        nome:
                      <input type="text" id="nome" placeholder="Nome" />
                        e-mail
                        <input type="text" id="email" placeholder="Email" />
                        <input type="submit" id="enviar" placeholder="Enviar" />
                    </fieldset>
                </form>    
            </td>
      </tr>
        <tr bgcolor="#FFFF00">
            <td>
                <form id="NOME-PADRÃO">
                    <fieldset>
                        nome:
                      <input type="text" id="nome" placeholder="Nome" />
                        e-mail
                        <input type="text" id="email" placeholder="Email" />
                        <input type="submit" id="enviar" placeholder="Enviar" />
                    </fieldset>
                </form>    
            </td>
      </tr>

php jquery ajax
  • 2

    You can’t have different elements with the same id! Use class for that reason.

  • 1

    Isn’t it MUCH more elegant for you to have the data listing and then a single form (or vice versa), with a single set of fields to be filled and submitted with AJAX and, if successful, the values of the fields would be cleared and the TR would change color? This way your application works with and without AJAX, without obstruction. ;)

1 answer

10


First of all, you cannot have multiple elements with the same id, as @Andrey commented above. Fix this in your HTML or it will be invalid (apart from the problems you will have when trying to locate these elements repeated by id). You can replace the ids with classes.

It is simple to submit all forms by Ajax, with the help of the method serialize jQuery, which scans a form and collects the values of the fields. The example below uses Promises to detect when all is completed.

var promessas = [];
var url = "url_do_seu_php";
$("form").each(function(){
  var dados = $(this).serialize();
  promessas.push($.post(url, dados));
});
$.when.apply($, promessas).done(function(){
  // todos os formulários foram processados
});

Browser other questions tagged php jquery ajax

You are not signed in. Login or sign up in order to post.