ajax delete not working with onclick event

Question

i need some help please i spent forever just searching and trying to know why nothing is happening when i click that button

html:

<td></td>
<td></td>
<td></td>
<td><button id="<?php echo($row['ID']); ?>" onClick="delord()" class="del" style="font-size: 12">delete</button></td>

jquery:

function delord(){
    var x = event.target.id;
    $.ajax({
        url: 'delorder.php?id=' + x,
        success: function(){
            alert('deleted');
        }
    });
}

i tried to type alert(x); inside my jquery code and it returned the value then i tried to go to "delorder.php?id=335" and the row has deleted successfully

just when i try it with ajax its not working

change this `var x = event.target.id;` to `x = $(this).attr('id');` — AbdulAhmad Matin, Sep 03 '18 at 17:11
Check for errors in the *Network* tab on the specific ajax request. There you can double check its headers, body, url, etc... — DontVoteMeDown, Sep 03 '18 at 17:12
@AbdulAhmadMatin i tried now and i tried to replace url: 'delorder.php?id=' + x with url: 'delorder.php?id=235' but also nothing happened — MOaaz Al Habbal, Sep 03 '18 at 17:15
@DontVoteMeDown it says there is an error in `$.ajax({` (Uncaught ReferenceError: $ is not defined) — MOaaz Al Habbal, Sep 03 '18 at 17:22
Possible duplicate of [JQuery - $ is not defined](https://stackoverflow.com/questions/2194992/jquery-is-not-defined) — Louys Patrice Bessette, Sep 03 '18 at 17:30
@MoǮazAlHabbal again, check your libraries paths in the console network. — DontVoteMeDown, Sep 03 '18 at 17:58

score 0 · Answer 1 · answered Sep 03 '18 at 17:48

A cross platoform way is to pass the event object in the onclick method like this

onclick="delord(event)"

then register the function as

function delord(e){ 
   e = e || window.event;
   var target = e.target;
   var id = target.getAttribute('id')
}

e will be the event and then your can grab the target element button

score 0 · Answer 2 · answered Sep 03 '18 at 20:42

Do these

     <table>
        <thead>
            <tr>
                <td>Name</td>
                <td></td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Stephen</td>
                <td><button onclick="deleteRow('delete',<?php echo($row['ID']); ?>)">Delete</button></td>
            </tr>
        </tbody>
    </table>

jQuery:

function deleteRow(action,id){
  $.ajax({
    url: 'delorder.php?id=' + id,
    success: function(){
        alert('deleted');
    }
  });
 }

ajax delete not working with onclick event

2 Answers2