CODEWITHSUNDEEP
jqueryajaxpost
Devner
Devner

Reputation: 7255

jquery Find out which button was clicked in AJAX posting

I have a form with 2 buttons, Confirm & Delete. I am posting a hidden input element ID. When Confirm is clicked, an action will be taken by using the element ID. If Delete is clicked, an entry in DB with the element ID is deleted. Now, the issue is when I do a print_r($_POST); exit();, it gives me the input element ID correctly. But it does NOT tell me which button was clicked. Is there a way to find out which button was exactly clicked in a single form? Both the buttons need to exist in the same form.

Here's my code that I tried:

jQuery

    var dataString = $('#form_confirm_delete').serialize();

    $.ajax({

              type: "POST",
              url: "ajaxpage.php",
              data: dataString,
              dataType: 'json',
              cache: false,       
              success: (function(response) 
                {
                    alert('Yes');
                })

         });

PHP page (ajaxpage.php):

<?php print_r($_POST); exit(); ?>

Upvotes: 3

Views: 11902

Answers (3)

Gandalf
Gandalf

Reputation: 13693

You could have a hidden input for the clicked button

When one of your two buttons is clicked

get the value of the clicked button for instance delete

<button id="deleteButton" value="delete">Delete</button>

and store the value of the clicked button in a variable like

$("#deleteButton").click(function(){
  var thebuttonclicked =$(this).attr("value");

then set the value of the hidden field

$('input[name=theclicked]').val(thebuttonclicked);

when submitted,you could get the post with the name theclicked. I think that this method is better even if http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2 the clicked button is submitted, jquery serialize does not include the clicked button.For more on serialize you could refer to http://api.jquery.com/serialize/

Upvotes: 3

Stefano Ortisi
Stefano Ortisi

Reputation: 5326

You can listen for both buttons doing:

$( '#delete_button' ).click(function(){
     submitForm( 'delete' );
}); 

$( '#submit_button' ).click(function(){
     submitForm( 'submit' );
});

And then pass your paramater in a single function:

function submitForm( type ){

    var dataString = $('#form_confirm_delete').serialize();
    dataString += "&type=" + type; 
    $.ajax({

          type: "POST",
          url: "ajaxpage.php",
          data: dataString,
          dataType: 'json',
          cache: false,       
          success: (function(response) 
            {
                alert('Yes');
            })

     });
}

Upvotes: 2

StaticVariable
StaticVariable

Reputation: 5283

you can use something like this

url: "ajaxpage.php?button="+id,

$("#BUTTON1").click(function(){
var url="ajaxpage.php?button="+this.id,
"
})

and in server side you can get that variable

or you can use post variable 

var id=this.id;
$.ajax({

              type: "POST",
              url: "ajaxpage.php",
              data:{"dataString": dataString,"id":id},
              dataType: 'json',
              cache: false,       
              success: (function(response) 
                {
                    alert('Yes');
                })
           // you can use this variable id server-side     
         });

Upvotes: 2

Related Questions