Detecting which button was pressed - php

Question

I'm trying to detect which was button was pressed with jQuery and then server-side do different things depending on the outcome.
The jQuery works fine (although I may have gone about it in a long- handed way) but I can't figure out why in my code whichever button I press I get the same response from php: "Add button detected". I hope someone can tell me what I've got wrong?
The jQuery
$(document).ready(function() {
$(".btn_add").on("click", function() { //If add btn pressed
var id = this.id;
var url = "process_ajax4.php?btn=" + this.id;
var formdata = $('.myForm').serialize();
$.post(url, formdata,
function(data) {
$("#results").html(data); //Response
});
});
$(".btn_remove").on("click", function() { //If remove btn pressed
var id = this.id;
var url = "process_ajax4.php?btn=" + this.id;
var formdata = $('.myForm').serialize();
$.post(url, formdata,
function(data) {
$("#results").html(data); //Response
});
});
});
The Php
<?php
$btn=$_POST["btn"]; //Other posted variables removed for simplicity
if($btn="btn_add"){
echo "<h1>Add button detected</h1>";
//Do stuff
}
elseif($btn="btn_remove"){
echo "<h1>Remove button detected</h1>";
//Do other stuff
}
?>
The html Form
<td>
<form id=\ "myForm\" class=\ "myForm\" action=\ "\" method=\ "post\" enctype=\ "multipart/form-data\">
<input type=\ "hidden\" name=\ "user_id\" value=". $collab_userid." />
<input type=\ "hidden\" name=\ "id\" value=".$upload_id." />
<button type=\ "submit\" id=\ "btn_remove\" class=\ "btn_remove\" name=\ "btn_remove\">Remove</button>
<button type=\ "submit\" id=\ "btn_add\" class=\ "btn_add\" name=\ "btn_add\">Approve</button>
</form>
</td>

Answer 1

You should add the pressed button to your formdata, otherwise the click couldn't be detected.
$(document).ready(function() {
$(".btn_add").on("click", function() { //If add btn pressed
var id = this.id;
var url = "process_ajax4.php?btn=" + this.id;
var formdata = $('.myForm').serialize();
formdata += "&btn=btn_add"; // added the btn
$.post(url, formdata,
function(data) {
$("#results").html(data); //Response
});
});
$(".btn_remove").on("click", function() { //If remove btn pressed
var id = this.id;
var url = "process_ajax4.php?btn=" + this.id;
var formdata = $('.myForm').serialize();
formdata += "&btn=btn_remove"; // added the btn
$.post(url, formdata,
function(data) {
$("#results").html(data); //Response
});
});
});

Answer 2

Change php code as follows
<?php
$btn=$_POST["btn"]; //Other posted variables removed for simplicity
if ($btn=="btn_add") {
echo "<h1>Add button detected</h1>";
//Do stuff
} elseif ($btn=="btn_remove"){
echo "<h1>Remove button detected</h1>";
//Do other stuff
}
?>

Answer 3

You need not have two separate function for jquery button handling. Also you can remove the button type="submit" from your code since you are detecting the click event
$(document).ready(function() {
$("button").on("click", function() { //If add btn pressed
var id = this.id;
var url = "process_ajax4.php?btn=" + this.id;
console.log(url);
var formdata = $('.myForm').serialize();
$.post(url, formdata,
function(data) {
$("#results").html(data); //Response
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td>
<form id="myForm" class="myForm" action="\" method= "post" enctype="multipart/form-data">
<input type="hidden" name="user_id" value=". $collab_userid." />
<input type="hidden" name="id" value=".$upload_id." />
<button type="submit" id="btn_remove" class="btn_remove" name= "btn_remove">Remove</button>
<button id="btn_add" class= "btn_add" name="btn_add">Approve</button>
</form>
</td>
You can use the parse_url() and parse_str() for getting the query string in php. In order to use $btn=$_POST["btn"]; tbn attribute must be passed as a form data, query parameters wont will be available through this method
<?php
$parts = parse_url($url);
parse_str($parts['query'], $query);
$btn = $query['btn'];
if($btn=="btn_add"){
echo "<h1>Add button detected</h1>";
//Do stuff
}
elseif($btn=="btn_remove"){
echo "<h1>Remove button detected</h1>";
//Do other stuff
}
?>

Answer 4

Your code works just make var url = process_ajax4.php that will fix your problem.in PHP use == instead of =, also add e.preventDefault() to your button clicks to prevent the form from being submitted with action='url'
$(document).ready(function() {
$(".btn_add").on("click", function(e) { //If add btn pressed
e.preventDefault();
var id = this.id;
var url = "process_ajax4.php";
var formdata = $('.myForm').serialize();
formdata += "&btn=btn_add"; // added the btn
$.post(url, formdata,
function(data) {
$("#results").html(data); //Response
});
});
$(".btn_remove").on("click", function(e) { //If remove btn pressed
e.preventDefault();
var id = this.id;
var url = "process_ajax4.php";
var formdata = $('.myForm').serialize();
formdata += "&btn=btn_remove"; // added the btn
$.post(url, formdata,
function(data) {
$("#results").html(data); //Response
});
});
});

Answer 5

i think your code looks ok.
i think in php you cannot compare string by =
you may need to change it to strcmp(strA,strB)==0 in order to ensure the input parameter is add button or remove button.

Answer 6

You don't actually need the jQuery code at all. Since both btn_remove and btn_add are submit buttons, you can check which of the buttons where used to submit the form by using:
if(isset($_POST["btn_remove"])) {
//Remove button was pressed.
}