how to delete data from database in php,ajax,javascript(no jquery)

Question

I'm trying to delete data from database but when I click on delete button then its delete the first row not where I'm clicking. my PHP Code:

<?php
    $connect = mysqli_connect("localhost","root","","abu");
    if($connect){
        $showdata = mysqli_query($connect,"SELECT * FROM dealers");
        if(mysqli_num_rows($showdata)>0){
            $i = 1;
            while($rows = mysqli_fetch_assoc($showdata)){
                echo "<tr>";
                echo "<td>".$i."</td>";
                echo "<td>".$rows["dealer_name"]."</td>";
                echo "<td><button onclick='deleteproduct()' class='delete'>Delete</button><input type='hidden' id='productid' vlaue='".$rows["id"]."'></td>";
                echo "</tr>";
                $i++;
            }
        }else {
            echo "<center><i>No Dealers to show</i></center>";
        }
    }
?>

And this is my ajax code:

function deleteproduct(){
    if(window.XMLHttpRequest){
        http = new XMLHttpRequest();
    }else {
        http = new ActiveXObject("Microsoft.XMLHTTP");
    }


    http.onreadystatechange = function(){
        if(http.readyState == 4 && http.status == 200){
            document.getElementById("alerts").innerHTML = http.responseText;
        }
    }

    var delid = document.getElementById("productid").value;
    var file = "assets/php/addproduct_deletedata.php";
    var senddata = "productid="+delid;

    http.open("POST",file,true);
    http.setRequestHeader("content-type","application/x-www-form-urlencoded");
    http.send(senddata);
}

I want that when I click on delete button then it delete the row where I clicked not others.

Answer 1

1. because its "value" and not "vlaue" ;)

input type='hidden' id='productid' vlaue ='".$rows["id"]."'

2. you're iterating over your resultset and printing out an input-field with the id "productid".

In your code, EVERY column has the SAME id. Thats the reason your javascript isn't working as expected. An ID needs to be unique .

You need to send the value (product id) as the function parameters. Do it like this:

<input type="hidden" onclick="deleteproduct(this.value)" value="$yourRowId"/>

or

<input type="hidden" onclick="deleteproduct($yourRowId)" />

and this is how you can retrieve the value in JS:

<script type="text/javascript">
function deleteproduct(id)
{
    alert(id); // your product ID
}
</script>

Answer 2

FIRST OF ALL YOU CANNOT ASSIGN THE SAME ID TO MORE THAN ONE ELEMENTS ON A PAGE .

The browser won't mind it but It makes the HTML invalid. You can use class attribute for this purpose.

You can validate your HTML online here

echo "<td><button onclick='deleteproduct()' class='delete'>Delete</button><input type='hidden' id='productid' vlaue='".$rows["id"]."'></td>";

For your requirement, you can use anchor tag instead of using a form with a hidden input field to reduce the DOM size and call the function on click and pass the function the productId as a parameter.

Here's the code:

<?php
    $connect = mysqli_connect("localhost","root","","abu");
    if($connect){
        $showdata = mysqli_query($connect,"SELECT * FROM dealers");
        if(mysqli_num_rows($showdata)>0){
            $i = 1;
            while($rows = mysqli_fetch_assoc($showdata)){
                echo "<tr id='row-".$rows["id"]."'>";
                echo "<td>".$i."</td>";
                echo "<td>".$rows["dealer_name"]."</td>";
                echo "<td><a href='#' onclick='return deleteproduct(".$rows["id"].")'>Delete</a></td>";
                echo "</tr>";
                $i++;
            }
        }else {
            echo "<center><i>No Dealers to show</i></center>";
        }
    }
?>

JavaScript:

function deleteproduct( delId ){
   var tableRowId = 'row-'+delId;

   // you got delId and tableRowId to remove the table row 

   // do ajax stuff here...


   return false;
}

Let me know how it went.