CODEWITHSUNDEEP
phpjquery
JulianJ
JulianJ

Reputation: 1315

Detecting which button was pressed

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>

Upvotes: 3

Views: 215

Answers (6)

Junius L
Junius L

Reputation: 16132

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

        });
  });

});

Upvotes: 1

Shubham Khatri
Shubham Khatri

Reputation: 281696

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
}
?>

Upvotes: 1

Dramentiaras
Dramentiaras

Reputation: 323

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.
}

Upvotes: 0

Philipp
Philipp

Reputation: 15629

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

            });
    });

});

Upvotes: 3

Elby
Elby

Reputation: 1674

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
    }


 ?>

Upvotes: 1

SKLTFZ
SKLTFZ

Reputation: 950

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.

Upvotes: 0

Related Questions