AJAX Delete multiple records with checkboxes

Question

I'm performing multiple delete records operation using jQuery and php currently i'm able to delete single / multiple records by clicking on checkbox its working fine as of now but my page gets refreshed every time i delete record because im not using ajax.

I'm a beginner in ajax I want to perform this same operation using JQUERY/AJAX which will not make my page reload every time i delete my record so i want to use ajax for the same code so that i can handle my page reload.

Somebody help me out in achieving it Thanks!!

HTML/PHP

   <form method="post" name="data_table">
            <table id="table_data">
                 <tr> 
                <td>Name</td>
                <td>Select All <input type="checkbox" id="check_all" value=""></td>
            </tr>
            <?php 
                $query = mysql_query("SELECT * FROM `products`");
                while($row = mysql_fetch_array($query)) 
                {
            ?>
                    <tr> 
                        <td>
                            <?php echo $row['product_title']; ?>
                        </td>
                        <td>
                            <input type="checkbox" value="<?php echo $row['id'];?>" name="data[]" id="data">
                        </td>
                    </tr>
            <?php 
                } 
            ?>
            </table>
            <br />
            <input name="submit" type="submit" value="Delete" id="submit">
       </form>

JQuery

  jQuery(function($) 
            {
            $("form input[id='check_all']").click(function() 
            {   
                var inputs = $("form input[type='checkbox']");
                for(var i = 0; i < inputs.length; i++) 
                { 
                    var type = inputs[i].getAttribute("type");
                    if(type == "checkbox") 
                    {
                        if(this.checked) 
                        {
                            inputs[i].checked = true;
                        } 
                        else 
                        {
                            inputs[i].checked = false;
                        }
                    } 
                }
            });

            $("form input[id='submit']").click(function() 
            {  var inputs = $("form input[type='checkbox']");
                var vals=[];
                var res;
                for(var i = 0; i < inputs.length; i++) 
                { 
                    var type = inputs[i].getAttribute("type");
                    if(type == "checkbox") 
                    {
                        if(inputs[i].id=="data"&&inputs[i].checked){
                            vals.push(inputs[i].value);
                        }
                    } 
                }

                var count_checked = $("[name='data[]']:checked").length; 
                if(count_checked == 0) 
                {
                    alert("Please select a product(s) to delete.");
                    return false;
                } 
                if(count_checked == 1) 
                {
                    res= confirm("Are you sure you want to delete these product?");   
                } 
                else 
                {
                    res= confirm("Are you sure you want to delete these products?");  
                }       
                if(res){
               /*** This portion is the ajax/jquery post calling   ****/
                $.post("delete.php", {data:vals}, function(result){
                    $("#table_data").html(result);
                 }); 
                }
            });
            });

PHP delete code

 <?php
 if(isset($_POST['data'])) 
 {
      $id_array = $_POST['data']; // return array
      $id_count = count($_POST['data']); // count array

      for($i=0; $i < $id_count; $i++) 
      {
         $id = $id_array[$i];
         $query = mysql_query("DELETE FROM `products` WHERE `id` = '$id'");
         if(!$query) 
         { 
              die(mysql_error()); 
         }
     }?>

Solution

Please do the changes jquery as

jQuery(function($) 
{
$("form input[id='check_all']").click(function() 
{   
    var inputs = $("form input[type='checkbox']");
    for(var i = 0; i < inputs.length; i++) 
    { 
        var type = inputs[i].getAttribute("type");
        if(type == "checkbox") 
        {
            if(this.checked) 
            {
                inputs[i].checked = true;
            } 
            else 
            {
                inputs[i].checked = false;
            }
        } 
    }
});

$("form input[id='submit']").click(function() 
{  var inputs = $("form input[type='checkbox']");
    var vals=[];
    var res;
    for(var i = 0; i < inputs.length; i++) 
    { 
        var type = inputs[i].getAttribute("type");
        if(type == "checkbox") 
        {
            if(inputs[i].id=="data"&&inputs[i].checked){
                vals.push(inputs[i].value);
            }
        } 
    }

    var count_checked = $("[name='data[]']:checked").length; 
    if(count_checked == 0) 
    {
        alert("Please select a product(s) to delete.");
        return false;
    } 
    if(count_checked == 1) 
    {
        res= confirm("Are you sure you want to delete these product?");   
    } 
    else 
    {
        res= confirm("Are you sure you want to delete these products?");  
    }       
    if(res){
   /*** This portion is the ajax/jquery post calling   ****/
    $.post("delete.php", {data:vals}, function(result){
        $("#table_data").html(result);
     }); 
    }
});

});

Delete.php as

 <?php
 if(isset($_POST['data'])) 
 {
      $id_array = $_POST['data']; // return array
      $id_count = count($_POST['data']); // count array

      for($i=0; $i < $id_count; $i++) 
      {
         $id = $id_array[$i];
         $query = mysql_query("DELETE FROM `test` WHERE `id` = '$id'");
         if(!$query) 
         { 
              die(mysql_error()); 
         }
     }?>
     <tr> 
                <td>ID</td>
                <td>TITLE</td>
                <td>Select All <input type="checkbox" id="check_all" value=""></td>
            </tr>
            <?php 
                $query = mysql_query("SELECT * FROM `test`");
                while($row = mysql_fetch_array($query)) 
                {
            ?>
                    <tr> 
                        <td>
                            <?php echo $row['id']; ?>
                        </td>
                        <td>
                            <?php echo $row['name']; ?>
                        </td>
                        <td>
                            <input type="checkbox" value="<?php echo $row['id'];?>" name="data[]" id="data">
                        </td>
                    </tr>
            <?php 
                } unset($row);

}