JQuery - use same function for multiple queries
I have this CLICK function that works for one specific HTML button. I would like to use it on multiple buttons, but each button has 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 configure this if I have 4 more buttons, each button uses this 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...
thank
source to share
Give your buttons the same class and call the code using the class name and add a data attribute to each button to get separate values.
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');
}
});
});
source to share
Use the data attribute to set the url. Use event delegation for button targeting
<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);
}
});
});
source to share
Use the class for the click event and the new attribute to find the button of type '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);
}
});
});
`
source to share
You can check the value of the clicked button and use the '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);
}
});
});
source to share
Use the same class for every 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);
});
}
});
});
source to share