Jquery - use the same function for multiple requests - php

Question

I have this CLICK function that works for one specific HTML button. I'd like to use it on multiple buttons, but each button needs to pass different variables to the same page.
BUTTON
<input type="button" id="scs" value="TEST" />
JQUERY
$("#scs").click(function() {
$("#status").html("<p>Please Wait! TESTING</p>");
$.ajax({
url: 'go.php?ab=1',
success: function(data, textStatus, xhr) {
alert (data);
}
});
});
How can I adapt this so if I have 4 more buttons each button uses the function, calls the same page but uses unique values ?
EG :
<input type="button" id="update" value="update" /> Calls go.php?up=1
<input type="button" id="new" value="new" /> Calls go.php?new=1
etc...
Thanks

Answer 1

Give your buttons the same class and call the code using the class name, and add a data attribute to each button to retrieve the seperate values.
Give this a try:
<input type="button" class="clickButton" data-value="go.php?up=1" value="Update" />
<input type="button" class="clickButton" data-value="go.php?new=1" value="New" />
$(".clickButton").click(function() {
$("#status").html("<p>Please Wait! TESTING</p>");
$.ajax({
url: $(this).attr("data-value"),
success: function(data, textStatus, xhr) {
alert (data);
$(this).prop('value', 'New Text');
}
});
});

Answer 2

Use the data-attribute to to set the url.
Use event delegation to target the buttons
<input type="button" class='btn' data-params='up=1' value="update" /> Calls go.php?up=1
<input type="button" class='btn' data-params='new=1' value="new" /> Calls go.php?new=1
$("button").on('click', '.btn', function() {
var url = 'go.php?' + $(this).data('params');
$("#status").html("<p>Please Wait! TESTING</p>");
$.ajax({
url: url,
success: function(data, textStatus, xhr) {
alert (data);
}
});
});

Answer 3

Use class for click event and new attribute to find the button like 'data-id'
<input type="button" class="clickevent" data-id="update" value="update" />
Jquery
`
$(".clickevent").click(function() {
$("#status").html("<p>Please Wait! TESTING</p>");
$.ajax({
url: $(this).attr('data-id'),
success: function(data, textStatus, xhr) {
alert (data);
}
});
});
`

Answer 4

You can check by the value of the clicked button and use a 'url' variable for the ajax request:
$("button").click(function() {
$("#status").html("<p>Please Wait! TESTING</p>");
var url='';
var value = $(this).val();
if(value == 'update'){
url='go.php?up=1';
} else if(value=='new') {
url='go.php?new=1';
} else if(value=='scs') {
url='go.php?ab=1';
}
$.ajax({
url: url,
success: function(data, textStatus, xhr) {
alert (data);
}
});
});

Answer 5

Use same class for each button
<input type="button" id="update" class="click" value="update" />
<input type="button" id="new" class="click" value="new" />
$(document).ready(function(){
$(".click").click(function(){
var val=$(this).val();
if(val =="update")
{
$.post("go.php",{'up':'1'},function(data){
alert(data);
});
}
else
{
$.post("go.php",{'new':'1'},function(data){
alert(data);
});
}
});
});