Multiple buttons

JavaScript
1

Hello.
I have 8 buttons.
Each one of them needs to run different PHP queries and code which I coded from a file.
My problem is that I do not want to write a differnet JS code for each button to load this file - and I want to use a different ID each button and one JS code for all.
This is what I have done so far:

<script type="text/javascript">
$("#complete").click(function() {
$(this).removeClass('button').addClass('red');
    $.ajax({
        url: 'ajax3.php?act=complete&id=**ID**',
        success: function(data){
             alert(data);
			 $("").removeClass('button').addClass('red');
        }
    });

    return false;
	$(this).prop('disabled', true);
});
</script>

It runs the code found in the ajax3.php page.
As you can see, there is ID which need to be changed. how do I get each button ID?

Example of the HTML/buttons:

<div class="button" style="margin-top:10px" id="complete">Complete</div>

I have 8 different buttons like that with the Complete text, each one of them refers to different query found in the ajax3.php.
All I need to do is transfer each button unique ID (1,2,3,4,5,6,7,8) to the PHP file, But I have no idea how to do it - because all of the has the same ID - complete.

Thanks in advance!

2

Hi,

Ids have to be unique to a page, so you will need to sort this out.
Once you have, you’ll be able to do:

url: 'ajax3.php?act=complete&id=' + this.id,
3

I know this, But I also said I do not want to code it 8 times…
I know I have to write this.id, But how do I receive this.id from the HTML of the complete button?

4

You’ll need to attach a click handler to all of the buttons.
Then when any button is clicked, this will refer to the button in question and you can access any of its attributes in the usual way.
E.g.

<button id="one">Button One</button>
<button id="two">Button Two</button>

<script>
  $("button").on("click", function(){
    console.log("Button number " + this.id + " was clicked.");
  });
</script>

HTH