Submit from several sources with AJAX, one at a time

Asked

Viewed 1,363 times

2

I have a code that I pick up with PHP the students registered in my bank, and I do a for so it has 1 form for each student. Each form has its Submit button, which takes it to AJAX to serialize the form.

This is the tag of my form (which is inside the for of PHP)

<form method="post" enctype="multipart/form-data" action="#" id="form1" class="form">

The Shadow of it

<button onclick="saveAluno(); return false" class="btn btn-block btn-primary">

and this is my AJAX to serialize 

function saveAluno(){
var data1 = $('.form').serialize();
console.log(data1);
$.post("controller/setters/addAlunoRotina.php", $('#form1').serialize(), function (response) {
    alert("Salvo com sucesso!");
}); }

This way he is Serializing all the Foms together, at once. Is there any way I can serialize one by one of these Foms?

This is an image of the Foms of my system, so maybe it will be easier to understand the problem;

php javascript html ajax
  • 1

    Is there a need to be a form for each student? I think the correct thing in this case is to use only one form for everyone, because you are treating the same student "object". If you are dealing with different objects/themes, then it makes sense to have more than one form.

  • @Edsonhoraciojunior unfortunately, there is the need yes Edson.

  • In ajax you want to send only one form?

  • @Edsonhoraciojunior this Edson, each of the Forms has its send button, I want to click it to serialize only the button form. I will edit my post;

  • Pera. You want to have, for example, 4 forms and by clicking "Save" send only the respective data of that form (ie only one)?

  • That’s right @Inkeliz

Show 1 more comment

2 answers

6


The button will no longer send the form, in place the jQuery will capture every time it is clicked. For this, add in the Buttons class the value bt_form

<button class="btn btn-block btn-primary bt_form">

And now add the jQuery code below in place of the saveAluno

// Toda vez que algum button for clicado
$('button.bt_form').on('click', function(event){
    event.preventDefault(); // Cancela submit padrão do button

    // Faz a mesma coisa que saveAluno mas usa .closest para pegar o form do button
    var data1 = $(this).closest('form');
    console.log(data1);
    $.post("controller/setters/addAlunoRotina.php", data1.serialize(), function (response) {
        alert("Salvo com sucesso!");
    }); 
});
  • 1

    +1 For the Closest alternative

  • 1

    @Edsonhoraciojunior worked, thanks man!!!

  • @Inkeliz Sorry, had made a comment thinking that you were the owner of the question, I confused rs

  • 1

    I realized (hahaa). I gave a more complex alternative and had even totally forgotten the "Closest".

2

If there are multiple formats, with same id: Form + Button

Change this:

<form method="post" enctype="multipart/form-data" action="#" id="form1" class="form">

For this (assuming it should be in a loop).

<?
 $i = 0; //EXEMPLO

while($mysql = $mysql->fetch_array()){ // EXEMPLO
?>

<form method="post" enctype="multipart/form-data" action="#" id="form<? echo $i ?>" class="form">

<button onclick="saveAluno(<? echo $i ?>); return false" class="btn btn-block btn-primary">

<?
$i++; //EXEMPLO
} // EXEMPLO
?>
  • Changes: now each form has a unique id.

Javascript

    function saveAluno(id){
var data1 = $('.form').serialize();
console.log(data1);
$.post("controller/setters/addAlunoRotina.php", $('#form'+id).serialize(), function (response) {
    alert("Salvo com sucesso!");
}); }
  • Changes: the button id is the same as the form, which has its unique name.

  • Thank you for the friendly reply!

Browser other questions tagged php javascript html ajax

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