Submit multiple forms using only 1 ajax?

Question

I'm getting my multiple forms using a while loop (fetch data in the database).

<form id="form" class="form-horizontal" method="post" >
<input type="text" class="form-control" name="name" value="test1">
<input type="text" class="form-control" name="car_type">
<button type="submit" class="buttona" id="buttona">Send</button>
</form>
<form id="form" class="form-horizontal" method="post" >
<input type="text" class="form-control" name="name" value="test2">
<input type="text" class="form-control" name="car_type" value="test2">
<button type="submit" class="buttona" id="buttona">Send</button>
</form>

Here's my ajax (It only works in the 1st form but the rest not working):

$(document).ready(function(){ 
 $(".form").submit(function(e) {
       e.preventDefault();
        $("#buttona").html('...');
        $("#buttona").attr("disabled", "disabled");
        sendInfo();

     });
});

Function for ajax:

function sendInfo() { 
        $.ajax({
          type: 'POST',
          url: '../process.php',
          data: $(".form").serialize(),
          success: function(data){
             if(data == 'Success') {
                $('#text_errora').html('added');
             }else {
               $('#text_errora').html('not aadded');                    
               }
          }
      })
        return false;
    }

How can I set or how ajax will recognize the button I click/submit to process the form?

Bart Friederichs · Accepted Answer · 2018-05-27 17:59:47Z

1

You don't close your <form> tag.
You use the same id twice.
You select anything with class form, not ID form.

Actually, I am amazed it works even one time.

Try this (no need to touch the JavaScript), your form should submit, but the button changing might not work (you use identical IDs there too; tip: an id has to be unique within the entire HTML DOM).

<form class="form form-horizontal" method="post" >
<input type="text" class="form-control" name="name" value="test1">
<input type="text" class="form-control" name="car_type">
<button type="submit" class="buttona" id="buttona">Send</button>
</form>

edited May 27, 2018 at 17:59

answered May 27, 2018 at 17:55

Bart Friederichs

33.8k16 gold badges112 silver badges219 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

kim de castro Over a year ago

Hi bro I checked it has a close tag. I also changed the ID (using $i++). but how can I call the ID form in ajax?

Bart Friederichs Over a year ago

Show the actual code please, we might be able to help better. (And I am not your bro.)

kim de castro Over a year ago

I echo all the value inside the form then use 1 ajax only the edit/send the data again.

nmr · Accepted Answer · 2018-05-27 18:29:05Z

Using "this" keyword inside submit handler, you will receive a reference to the form to which the clicked button belongs.

$(document).ready(function(){ 
$(".form").submit(function(e) {
       e.preventDefault();
        var form_to_submit = this;
        $("#buttona").html('...');
        $("#buttona").attr("disabled", "disabled");
        sendInfo(form_to_submit);

     });
});


function sendInfo(form_to_submit) { 
    $.ajax({
        type: 'POST',
        url: '../process.php',
        data: $(form_to_submit).serialize(),
        success: function(data){
            if(data == 'Success') {
                $('#text_errora').html('added');
            }else {
                $('#text_errora').html('not aadded');                    
            }
        }
    })
    return false;
}

Collectives™ on Stack Overflow

Submit multiple forms using only 1 ajax?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related