检测按下了哪个按钮

时间:2016-11-25 10:43:52

标签: php jquery

我正在尝试检测哪个按钮是用jQuery按下的,然后服务器端根据结果做不同的事情。

jQuery运行正常(虽然我可能已经用了长篇大论)但我无法弄清楚为什么在我的代码中按下我按下的按钮我从php得到相同的响应:“添加检测到按钮“。我希望有人可以告诉我我错了什么?

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

            });
    });

});

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

html表格

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

6 个答案:

答案 0 :(得分:3)

您应该将按下的按钮添加到formdata,否则无法检测到点击。

$(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

            });
    });

});

答案 1 :(得分:1)

更改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
    }


 ?>

答案 2 :(得分:1)

不需要两个单独的功能来处理jquery button。此外,您可以从代码中删除button type="submit",因为您正在检测点击事件

$(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>

您可以使用parse_url()parse_str()获取php中的查询字符串。为了使用$btn=$_POST["btn"]; tbn属性必须作为表单数据传递,查询参数将不会通过此方法提供

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

答案 3 :(得分:1)

您的代码只需var url = process_ajax4.php即可修复您的问题。PHP使用==代替=,同时为您的按钮点击添加e.preventDefault()阻止使用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

        });
  });

});

答案 4 :(得分:0)

我认为您的代码看起来不错。

我认为在php中你不能比较字符串= 您可能需要将其更改为strcmp(strA,strB)== 0,以确保输入参数是添加按钮或删除按钮。

答案 5 :(得分:0)

根本不需要jQuery代码。由于btn_removebtn_add都是提交按钮,因此您可以使用以下方法检查用于提交表单的按钮:

if(isset($_POST["btn_remove"])) {
     //Remove button was pressed.
}