将数据发送到ajax

Question

posting data from the form to php using ajax.When we change the radio button data is not clearing.Please check the code.
Here is the code Please help me. And this is my from

<form name="theform" action="" method="post" id="paymentHistory">
    <div class="co1">Type:
        <table width="240">
            <tr>
                <td>
                    <input type="checkbox" name="Successfull" value='Successfull'>
                </td>
                <td>Successfull</td>
                <td>
                    <input type="checkbox" name="Failure" value='Failure' />
                </td>
                <td>Failure</td>
            </tr>
        </table>
    </div>
    <div class="co">Data Range:
        <table width="422">
            <table>
                <div>
                    <tr>
                        <td style="width: 8px;">
                            <input type="radio" name="Today" id="Today" value='Today'>
                        </td>
                        <td style="width: 80px;">
                            <label for="Today">Today</label>
                        </td>
                        <td style="width: 8px;">
                            <input type="radio" name="Today" id="Lastweek" value='Lastweek'>
                        </td>
                        <td style="width: 80px;">
                            <label for="Lastweek">Lastweek</label>
                        </td>
                        <td style="width: 8px;">
                            <input type="radio" name="Today" id="30days" value='30days'>
                        </td>
                        <td style="width: 80px;">
                            <label for="30days">30days</label>
                        </td>
            </table>
            </div>
</form>

And this is the script.

<script type="text/javascript">

$(document).ready(function () {
   $('#paymentHistory input:radio').click(function () {

        if (this.checked) {

            var opts = [];
            opts.push($('#paymentHistory input:radio:checked').val());

            $('#paymentHistory :checkbox').click(function () {
                alert($('#paymentHistory input:radio:checked').val())
                if (this.checked) {
                    opts.push(this.name);
                } else {
                    if (!this.checked) {
                        alert(this.name);
                        opts.pop(this.name)
                    }
                }


                $.ajax({
                    type: "POST",
                    url: "tabletest/submit.php",
                    dataType: 'json',
                    cache: false,
                    data: {
                        filterOpts: opts
                    },
                    success: function (records) {
                        $('#phones tbody').html(makeTable(records));
                    }
                });

                function makeTable(data) {
                    var tbl_body = "";
                    $.each(data, function () {
                        var tbl_row = "";
                        $.each(this, function (k, v) {
                            tbl_row += "<td align='center'>" + v + "</td>";
                        })
                        tbl_body += "<tr>" + tbl_row + "</tr>";
                    })

                    return tbl_body;
                }

            });


        }
    });
});
</script>

This is my php code data is not getting.Please help me.

<?php 


  $select = 'SELECT *';
  $from = ' FROM payment_details';
  $where = ' WHERE TRUE';
  $nickname = $_SESSION['username'];

  $opts = $_POST['filterOpts'];  
  $options = explode("&",$opts);

$Today = "";
$Lastweek = "";
$days = "";
$Successfull = "";
$Failure = "";  

foreach($options as $key) 
{    
   $key = explode("=",$key);       
   $type = $key[2]; 

   if ("Today" == $type)
   {    
       $Today= "Today"; 
   }

   if ("Lastweek" == $type)
   {     
      $Lastweek = "Lastweek";
   }

   if ("30days" == $type)
   {     
      $days = "30days";
   } 

   if ("Successfull" == $type)
   { 
      $Successfull = "Successfull";           
   }

   if ("Failure" == $type)
   {    
     $Failure = "Failure";
   } 
} 



    if( $Today == "Today" )
    {    
       date_default_timezone_set('Asia/Kolkata');
    $d = date('Y-m-d 00:00:00');
        $where .= " AND tran_ini_date >= '$d' ";        
    }

    if('Lastweek' == $Lastweek)
    {     
       $d =  date('Y-m-d 00:00:00', strtotime("-7 days") );
       $where .= " AND tran_ini_date >= '$d' "; 
    }

   if('30days' == $days)
   {     
     $d =  date('Y-m-d 00:00:00', strtotime("-30 days") );
     $where .= " AND tran_ini_date >= '$d' "; 
   }
   if("30days" == $days)
   {     
     $d =  date('Y-m-d 00:00:00', strtotime("30 days") );
     $where .= " AND tran_ini_date <= '$d' "; 
   }


    $check = 0;
    if('Successfull' == $Successfull)
    { 
         $check = 1;
         $where .= " AND (status='success' "; 
    }

    if('Failure' == $Failure)
      {    
         if($check == 0)
          $where .= " AND (status='pending') "; 
         else
          $where .= " OR status='pending') ";   
     }




$sql = $select . $from . $where . " and nickname="."'".$nickname."'";


$conn = mysql_connect("localhost","root","********");
if (!$conn)
{
    die('Could not connect: ' . mysql_error());
}

mysql_select_db("**********",$conn);
$result = mysql_query($sql,$conn);
$data   = array();
while ($row = mysql_fetch_assoc($result)) 
{
$data[] = $row;
}
$json = json_encode($data);
echo($json);

echo $sql;

?>

Answer 1

You have had errors in your code, and the approach to use :checkbox click inside of :radio click event is not proper way. See modified code which should work for you:

$(document).ready(function () 
{   
    makeTable = function(data)
    {
        var tbl_body = "";
        $.each(data, function() {
            var tbl_row = "";
            $.each(this, function(k , v) {
                tbl_row += "<td align='center'>"+v+"</td>";
            })
            tbl_body += "<tr>"+tbl_row+"</tr>";                 
        })

        return tbl_body;
    };

    var pushToServer = function(opts){
        alert(opts);
           $.ajax({
           type: "POST",
           url: "tabletest/submit.php",
           dataType : 'json',
           cache: false,
           data: {filterOpts: opts},
           success: function(records){
               $('#phones tbody').html(makeTable(records));
           }
       });
    };

    $('#paymentHistory input:radio, #paymentHistory input:checkbox').click(function() {
        pushToServer($('#paymentHistory').serialize());
    });
});

DEMO