CODEWITHSUNDEEP
phpjavascriptjqueryhtml
lemoncodes
lemoncodes

Reputation: 2421

How to delete record in HTML table using jQuery/Javascript/PHP

I'm currently working on records that is tabulated in HTML, records are from the database and on the end part of that table, i have some actions, EDIT DELETE SHOW, i've already done the edit, which is NOT the same as my DELETE, my DELETE action is done using ajax, but the problem is that i can't properly get the value of each button, which contains the ID from the database.

This is part of the table where the delete button is located:

 <td width="61"><button id="delete" value="<?php echo "$arr[0]"; ?>">Delete</button></td>

These is the jQuery part 

$("#delete").click(function(){
    alert($("#delete").val()); <-- CAN"T GET THE CORRECT ID
    //AJAX PART HERE
})

The problem is that i can't correctly get the value of the button which i pressed, how do i do this, any suggestions are greatly appreciated..

This is the whole view of the table,

enter image description here

Upvotes: 0

Views: 3915

Answers (6)

Tzook Bar Noy
Tzook Bar Noy

Reputation: 11677

ok here is your solution:

1) insted of id="delete" use class. like this:

<td width="61"><button class="delete" value="<?php echo "$arr[0]"; ?>">Delete</button></td>

2) your jquery should be:

$(".delete").click(function(){
    alert($(this).val()); <-- CAN"T GET THE CORRECT ID
    //AJAX PART HERE
})

This should alert the propper id, I proposee to this mehoded for edit, and show actio....

Upvotes: 0

Bogdan Burym
Bogdan Burym

Reputation: 5512

Try this: 

  $("button[id=delete]").click(function(){  
      $(this).closest('tr').remove(); // Delete row
      alert($(this).attr('value'));  // ID
  });

button[id=delete] - because you'll have many buttons with same ID, better use CSS Classes...

Upvotes: 0

Dennis Hackethal
Dennis Hackethal

Reputation: 14275

The value of the button is what's displayed on it as text, but that won't get you the table's id. Also, since there are several delete buttons, use a class instead of an id.

Change your html code to something like this, using a custom attribute called "db-id", through which you will find out which record to delete:

<input class="delete" db-id="<?=$db-id?>" value="Delete"/>

Then, your js code can be adjusted like this:

$(".delete").click(function(){
    var dbid = $(this).attr('db-id');
    $.ajax({
        type: 'POST',
        url: 'script-url/here.php'
        data: 'id=' + dbid,
        success: function(feedback){
            if(success==true) $('tr[db-id="' + dbid + '"]').delete
        }
    }).error(){
        alert('Something went horribly wrong!');
    };
})

Note that in the success function you can even make the row with the data disappear using .delete()

Also note that any malicious user will be able to edit the button's db-id in the browser, so take all necessary precautions and validations in the php script!

Upvotes: 0

pswillies
pswillies

Reputation: 136

Just use jQuery's 'this' to access the button within the function...

e.g.

replace 

alert($("#delete").val()); <-- CAN"T GET THE CORRECT ID

with

alert($(this).val());

Upvotes: 0

xfx
xfx

Reputation: 1948

First, write delete method in server side, like delete.php, return status, like 'error' and 'success'

$("#delete").click(function(){
    var id = $(this).attr('id');
    //AJAX PART HERE
    $.get('delete.php?id=xxx',function(status){
        if (status == 'success') $(this).parent().remove();
    }
})

Upvotes: 0

Billy Moon
Billy Moon

Reputation: 58531

Not tested, but I expect the issue is that you are trying to get the val() of all the matches for #delete, which is probably all of your delete buttons (I can not know without seeing your generated HTML).

You should actually use a class of delete and select with .delete rather than an id, as an id, according to the HTML specification should refer to a unique element.

$("#delete").click(function(){
    // note the use of `this` to refer to clicked object, rather than all delete buttons
    alert($(this).val());
    //AJAX PART HERE
})

Upvotes: 6

Related Questions