如何删除一个单选按钮后置值以呈现新的无线电选择结果

Question

I am working on a module with 3 radio buttons. Clicking one radio button lists data related to it and so on. I have applied ajax call on radio buttons click and return an array in the response. My problem here is for each radio button click the data keeps on adding into the list. For e.g. if I click on 'All users' radio it displays the data related to "All" but again if I click on "Unapproved Users" radio, the list adds up to the 'All users ' listing at the bottom. So how can I reset the $_POST variable each time the data is rendered so that new list appears for new radio selection, I would really appreciate the help or advice for this.

Code goes as,

 <script>
        $('#selection').change
        (

            function() 
            {
              var selected_value = $("input[name='users']:checked").val();
              //till here the code works fine.
$.ajax
                ( 
                    {
                        url: "approval_ajax.php",
                        dataType : "json",
                        type: "POST",
                        cache: false,
                        data: { selected_value : selected_value },

                        success: function(response)
                        {
                             console.log(response);
                                var len = response.length;
                           for(var i=0; i<len; i++){
                                 var id = response[i].id;
                                 var email = response[i].email;
                                 var employee_id = response[i].employee_id;
                                 var first_name = response[i].first_name;
                                 var middle_name = response[i].middle_name;
                                 var last_name = response[i].last_name;
                                 var mobile = response[i].mobile;
                                 var created_on = response[i].created_on;
                                 var disabled = response[i].disabled;

                    var tr_str = "<tr>" +
                        "<td>" + (i+1) + "</td>" +
                        "<td>" + email + "</td>" +
                        "<td>" + employee_id + "</td>" +
                        "<td>" + first_name + "&nbsp;" + middle_name + "&nbsp;" + last_name + "</td>" +
                        "<td>" + mobile + "</td>" +
                        "<td>" + created_on + "</td>" +
                        "<td><input type='checkbox' name='check[]'"  + disabled +  "value= '"  + id +  "' class='checkbox' id='select_all' ></td>" +
                          "<input type='hidden' value='"  + id +  "' name='user_id' id='user_id' >" +
                        "</tr>";

                    $("#example").append(tr_str);
                }
                           alert("AJAX was a success");
                        }
                    }
                );
            }
        );
    </script>

And now my approval_ajax.php

  <?php


session_start();

require("../includes/config.php"); 
require("../classes/Database.class.php"); 
$db = new Database(DB_SERVER, DB_USER, DB_PASS, DB_DATABASE);  

$return_arr = array();
$status=''; 

   if($_SERVER['REQUEST_METHOD'] == 'POST')
   {
       $value = filter_input(INPUT_POST, "selected_value");


       if (isset($value))
       {
         $users=$value;

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

}

$sq = $db->query($sqlQuery);


if ($db->affected_rows > 0) {

while ($row = mysql_fetch_array($sq)) {
    $disabled = '';
    if ($status == '1') {

        $disabled = "disabled = 'disabled' checked='checked' ";
    }

    $id = $row['id'];
    $email = $row['email'];
    $employee_id = $row['employee_id'];
    $first_name = $row['first_name'];
    $middle_name = $row['middle_name'];
    $last_name = $row['last_name'];
    $mobile = $row['mobile'];
    $created_on1 = $row['created_on'];
    $created_on = date("d-m-Y", strtotime($created_on1));

    $return_arr[] = array("id" => $id,
    "email" => $email,
    "employee_id" => $employee_id,
    "first_name" => $first_name,
    "middle_name" => $middle_name,
    "last_name" => $last_name,
    "mobile" => $mobile,
    "created_on" => $created_on,
    "disabled" => $disabled
    );
}
}
header('Content-Type: application/json', true, 200);
echo json_encode($return_arr);
}

Answer 1

The $_POST variable is reset on every new request.

The issue here is that you're using jquery's append() function. This function just adds up content to the end of your element.

EDITED: In order to clear your list before adding new data, use the empty() function.