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

Question

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

Should "$arr[0]"contain the ID from database ?

david strachan
– david strachan

2012-10-19 11:44:54 +00:00
Commented Oct 19, 2012 at 11:44 — david strachan
– david strachan, Commented Oct 19, 2012 at 11:44

Billy Moon · Accepted Answer · 2012-10-19 11:39:55Z

6

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
})

answered Oct 19, 2012 at 11:39

Billy Moon

58.9k27 gold badges148 silver badges244 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

lemoncodes Over a year ago

ohhh scratch the last comment, changing the id to class works just fine, and yes i think the selector from jquery selected the all buttons with that id and something like what u said, :D tnx man

Billy Moon Over a year ago

So don't use an id for several elements, use a class, see update!

xfx · Accepted Answer · 2012-10-19 11:41:18Z

0

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();
    }
})

answered Oct 19, 2012 at 11:41

xfx

1,9581 gold badge19 silver badges27 bronze badges

Comments

pswillies · Accepted Answer · 2012-10-19 11:45:22Z

0

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());

answered Oct 19, 2012 at 11:45

pswillies

1364 bronze badges

1 Comment

pswillies Over a year ago

bit slow with that response... what Billy said :-)

Dennis Hackethal · Accepted Answer · 2012-10-19 11:47:49Z

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!

Bogdan Burym · Accepted Answer · 2012-10-19 11:51:00Z

0

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...

answered Oct 19, 2012 at 11:51

Bogdan Burym

5,5022 gold badges30 silver badges47 bronze badges

Comments

Tzook Bar Noy · Accepted Answer · 2012-10-19 11:53:13Z

0

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....

answered Oct 19, 2012 at 11:53

Tzook Bar Noy

11.7k14 gold badges58 silver badges86 bronze badges

Collectives™ on Stack Overflow

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

6 Answers 6

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related