CODEWITHSUNDEEP
phpjqueryajaxbuttonload
JeffVader
JeffVader

Reputation: 702

Jquery - use the same function for multiple requests

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

Upvotes: 0

Views: 629

Answers (5)

RobF
RobF

Reputation: 2818

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');
        }
    });
});

Upvotes: 1

Srinu M
Srinu M

Reputation: 76

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);
                          });
                          }

               }); 
            });

Upvotes: 0

dcodesmith
dcodesmith

Reputation: 9614

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);
        }
    });
});

Upvotes: 1

Minciu
Minciu

Reputation: 96

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);
    }
    });
    });

Upvotes: 0

Moorthy GK
Moorthy GK

Reputation: 1301

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);
}
});
});

`

Upvotes: 0

Related Questions