仅显示单选按钮选择的列表

时间:2017-11-22 06:22:24

标签: javascript php jquery mysql ajax

我正在开发一个模块,其中管理员会获取已请求批准的候选人列表。目前我正在使用三个选项的单选按钮和一个提交按钮。现在我只想通过选择结果列表的单选按钮来实现它。如何实现此功能以显示同一页面上所有三个不同选择的列表。 这是我创造的,

<form  action=""  method="POST">

          <input type='radio'  name='users' value='unapproved' checked /> Unapproved Candidates &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <input type='radio'  name='users' value='approved' /> Approved Candidates &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <input type='radio' id='show' name='users' value='all'  /> All Candidates &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         <input type="submit" value="View Candidates" id="submit" class="btn btn-success"><br><br> 

我的mysql查询,

$sqlQuery = "SELECT * FROM tbl_user WHERE type =3 AND status =0";



if(isset($_POST['users'])){

 $users=$_POST['users'];
}else{
    $users='';
}


switch ($users)

{

case "all":
  $sqlQuery = "SELECT * FROM tbl_user WHERE type =3";
break;

case "approved":
   $sqlQuery = "SELECT * FROM tbl_user WHERE type =3 AND status =1";
break;

case "unapproved":
  $sqlQuery = "SELECT * FROM tbl_user WHERE type =3 AND status =0";
break;

}

我发现这可以通过AJAX实现,但无法找出确切的解决方案。我能否对此有所了解,对我非常有帮助,我们将非常感激。提前致谢

1 个答案:

答案 0 :(得分:1)

在每个单选按钮标记上添加一个类,并使用click事件检查单选按钮的点击和状态。你所要做的就是 -

// Selecting a class using jquery. It will return all the elements that have this class
$(".radioButton").click(function() {
    // Using `this`, JS can identify which element has been clicked with class radioButton

    // Here I'm checking whether it has been selected or not
    if(this).is(":checked") {
            // Here I'm fetching the value of selected radio button
            var category = $(this).val();
            $.ajax({
            // Url of your PHP code
            url: "YOUR_URL.php",
            // Method of your Ajax request
            method: "POST",
            // Data in case of post request
            data: {
                'users': category 
            },
            success: function(result){
                console.log("Response:\n"+result);
            },
            error: function(er){
                console.log("Error\n"+er);
            }
        });
    }
});