Is It Possible To Set Up A Single Ajax Call For Numerous Inputs?

Alright guys, I’ve got an interesting problem:

In a php file I have a form tag with numerous inputs of type submit (so they’re basically buttons) and they were created automatically by an outside php script (so they have names like button0, button1, etc.). I am trying to use ajax and jQuery to, on click, send the value of the clicked button to a database using another php script.

I’m kind of new to ajax. The way I understand the syntax that I’m using is that you would write something like this:

$.post('phpScripts/whateverFile.php', {name: value}).done(function(data){//do something});

(The above would be put in the callback function of the listener of a click event in the submit button I’m talking about; yes, I made sure to use e.preventDefault())

For example, if I have a single button like this:

<input type = "Submit" name = "button0" value = "Button0"></input>

I could send that to be taken care of by the php file using post like this:

$.post('phpScripts/whateverFile.php', {button0: $(this).val()}).done(function(data){//do something});

Remember, because it is part of an event listener I attached to the button itself, I can use this to reference it (or so I figure).

And in the php file I could have something like this:

   //do whatever

My question is: how would I go about writing the ajax for NUMEROUS submit buttons with the same event listener? That is, they all have the same class, and I just do this:

$('.sameClass').click(function(e){//ajax function in here

The way I’m currently doing it works with a single button. Now, I tried making the names unique by putting each in a variable and replacing the actual name with the variable like this:

var buttonName = $(this).attr('name');
$.post('phpScripts/whateverFile.php', {buttonName: $(this).val()}).done(function(data){console.log(data);});

But that didn’t work and I am now hopelessly out of ideas. Any ideas of how I can do this? Is it even possible? How do I make it so that when I click each of these submit buttons, some unique data is sent based on the button?

Your help is greatly appreciated…

AJAX tends to go by the tag $.ajax

    url: "phpScripts/whateverFile.php",
    type: "POST",
    data: yourDataToSend,
    success: function(result){
    // Do stuff here
    error: function(xhr,status,error){
    // Do stuff here

What exactly is it you want to send, the innerHTML of the buttons?
You could pass in the event to the ajax and send the’s innerHTML/value as the data.


Thanks, that helped a lot. I’ll study this method of making ajax calls