How to delete row in database through ajax

Question

I want to delete a row in my database according to the ID that the row is. Each row has a delete button and that button is placed by using a form in the php file for each row. I used an javascript function with ajax to display the table I wanted but now I have another function that I want to use to delete a row according to it's ID.

The problem I encountered was that every time I click the delete button my whole page just refreshes and the record is still there. Any help?

P.S. I'm new to php, ajax, and especially javascript and have not learned any jQuery so preferably help would be appreciated if codes were to be written in pure javascript as I want to learn the basics first.

This is the function in the javascript to delete the row using ajax xmlhttp object.

function deleteThis(){
 var del = document.getElementById("delete");
 var delRow = document.getElementById("deleteRow");
 var page = "database.php";
 var parameters = 'delete='+del+'&deleteRow='+delRow;
 var xmlhttp = new XMLHttpRequest();
 if(confirm('Are you sure you want to delete this?')==true){
 xmlhttp.onreadystatechange=function(){
 if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
  //What should be in here?
  }
 }
  xmlhttp.open("POST", page, true);
  xmlhttp.send(parameters);
 }
}

These are the codes in the php file to delete the row

// Delete Row
if(isset($_POST['delete'])){//java script function somewhere
 $id = $_POST['deleteRow'];
 $query_string = "delete from $table_info where user_id='$id'";
 $result = @mysql_query($query_string);
 echo "row deleted";
}else {
 echo "Cannot delete row";
}

This is the button inside a table to put a delete button for each row.

<!--Delete button-->
<td><form id="delete" method="post" action="">
<input type="hidden" name="deleteRow"  value="<?php echo $row['user_id']; ?>"/>
<input type="submit" name="delete" value="Delete" id="delete" onclick="return deleteThis()"<td></form></tr>

Answer 1

First, you have multiple issues with your HTML. I would suggest you indent your code consistently to help point out issues. Also, remember to close your tags. For example:

<td>
    <form id="delete" method="post" action="">
        <input type="hidden" name="deleteRow"  value="<?php echo $row['user_id']; ?>"/>
        <input type="submit" name="delete" value="Delete" id="delete" onclick="return deleteThis()">
    </form>
</td>

Also, if you this button next to every row on the page you shouldn't give it an id. ids need to be unique on a page (only one of each). Perhaps you should use a class instead?

Second: a submit type of input will literally submit its enclosing form and refresh the page. Thats its purpose. If you want to use AJAX, you don't want to actually do this.

What I would suggest is putting another function into your javascript and referencing this from the onclick of a <button> rather than an <input>. Then you can properly prevent submission of the page.

Eg:

<td>
    <form id="delete" method="post" action="">
        <input type="hidden" name="deleteRow"  value="<?php echo $row['user_id']; ?>"/>
        <button name="delete" class="delete" onclick="javascript:handleDeleteClick(event, <?php echo $row['user_id']; ?>);">Delete</button>
    </form>
</td>

And in your javascript:

function handleDeleteClick(e, userId) {
    e.preventDefault(); // Prevent default behaviour of this event (eg: submitting the form

    // Perform the AJAX request to delete this user
    var delRow = document.getElementById("deleteRow");
    var page = "database.php";
    var parameters = 'delete=true&deleteRow='+delRow;
    var xmlhttp = new XMLHttpRequest();

    if (confirm('Are you sure you want to delete this?') == true) {
        xmlhttp.onreadystatechange = function() {
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                // Request completed
            }
        }

        xmlhttp.open("POST", page, true);
        xmlhttp.send(parameters);
    }
}

Answer 2

Try this:

<input type="submit" name="delete" value="Delete" id="delete" onclick="return deleteThis(); return false"><td></form></tr>

It will avoid to submit form. Take a look: event.preventDefault() vs. return false

Here is a snippet for you:

<script>
  function deleteThis() {
    "use strict";
    var sure = confirm('Are you sure you want to delete this?');
    if (!sure) {
      return;
    }

    var del = document.getElementById("delete");
    var delRow = document.getElementById("deleteRow");
    var page = "database.php";
    var parameters = 'delete=' + del + '&deleteRow=' + delRow;
    var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function(data) {
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        alert("Form sent successfully");
      }
    }
    xmlhttp.open("POST", page, true);
    xmlhttp.send(parameters);
  }
</script>

<form id="delete" method="post" action="?">

  <input type="hidden" name="deleteRow" value="<?php echo $row['user_id']; ?>" />
  <input type="submit" name="delete" value="Delete" id="delete" onclick="deleteThis(); return false;">

</form>