CODEWITHSUNDEEP
javascriptjquery
calvin12
calvin12

Reputation: 211

How to apply same Jquery function to multiple button

I am trying to get data from my database using Ajax. What I want to do is add a delete button after every data row, so that if I want to delete a particular row i just click the delete button in front of it. How do i do that? I am presently trying to use both Jquery and javascript..

<table>
<tr><td> A </td> <td> <input type = 'button' onclick = 'delete(A)' value = 'Delete'></td></tr>
<tr><td> B </td> <td> <input type = 'button' onclick = 'delete(B)' value = 'Delete'></td></tr>
</table>

<script type="text/javascript">
$(document).ready(function() {
function delete(d) {
    var deletedata = 'delete=' + d;
    $.post('searchadd.php', deletedata, function(data) {
          **AJAX CODE**

    });
    return false;
 };

 });
 </script>

how do i do this?? Is this can be done directly with only Jquery??

Upvotes: 1

Views: 2302

Answers (6)

Colin Bacon
Colin Bacon

Reputation: 15609

Preferred method would be using data attributes to store the id. As of jQuery 1.7 .on() is prefered over .live() and .delegate()

<table>
        <tr><td> A </td> <td> <input data-id='1' type = 'button' value = 'Delete'></td></tr>
        <tr><td> B </td> <td> <input data-id='2' type = 'button' value = 'Delete'></td></tr>
    </table>
    <script type="text/javascript">
        $(document).ready(function ()
        {
            $(':button').on('click', function ()
            {
                var id = $(this).data('id');
                deleteRow(id);
            });

            function deleteRow(d)
            {
                var deleteData = 'delete=' + d;
                $.post('searchadd.php', deleteData, function (data)
                {
                    ** AJAX CODE **
                });
                return false;
            }
        });
    </script>

Upvotes: 1

Anoop
Anoop

Reputation: 23208

Modified code: jsfiddle

<table>
    <tr><td> A </td> <td> <input type = 'button'  value = 'Delete'></td></tr>
    <tr><td> B </td> <td> <input type = 'button' value = 'Delete'></td></tr>
    </table>

    <script type="text/javascript">
    $(document).ready(function() {
    function deleteFromDB(d) {
        var deletedata = 'delete=' + d;
        $.post('searchadd.php', deletedata, function(data) {
              **AJAX CODE**

        });
        return false;
     };
     $("input[value='Delete']").live('click',function(){
      var data = $(this).parents("tr:first").find("td:first").text();// A B
      deleteFromDB(data );
     });
     });
     </script>

Note: don't use delete as a function name as it is a keyword in JavaScript

Upvotes: 0

jodarove
jodarove

Reputation: 130

I would prefer this way: 

<table>
<tr><td class="data-desc"> A </td> <td class="data-delete"> <input data-id="A" type='button'  value='Delete'></td></tr>
    <tr><td class="data-desc"> B </td> <td class="data-delete"> <input type='button' data-id="B" value = 'Delete'></td></tr>
</table>

<script type="text/javascript">
$(document).ready(function() {
function delete(d, onDelete) {
    var deletedata = 'delete=' + d;
    $.post('searchadd.php', deletedata, function(data) {
          **AJAX CODE**
          onDelete.call();

    });
    return false;
 };
 $("input[value='Delete']").live('click',function(){
   var that = $(this).parents("tr:first");
   delete($(this).data("id"), function () {
      // after is deleted on db...
      that.remove();
   });
 });
 });
 </script>

Upvotes: 0

Diode
Diode

Reputation: 25145

html

<table>
<tr><td> A </td> <td> <input class="del-button" type = 'button' onclick = 'delete(A)' value = 'Delete'></td></tr>
<tr><td> B </td> <td> <input class="del-button" type = 'button' onclick = 'delete(B)' value = 'Delete'></td></tr>
</table>

javascript

$(".del-button").on("click", function(e){
    // code for deletion
});

Upvotes: 0

SNAG
SNAG

Reputation: 2113

Try this fiddle. This should solve your problem

Upvotes: 0

muthu
muthu

Reputation: 5461

Try with the class name

<table>
    <tr><td> A </td> <td> <input type = 'button' class= 'btn' value = 'Delete'></td></tr>
    <tr><td> B </td> <td> <input type = 'button'  class= 'btn' value = 'Delete'></td></tr>
    </table>

 $(document).ready(function() {
    function delete(d) {
        var deletedata = 'delete=' + d;
        $.post('searchadd.php', deletedata, function(data) {
              **AJAX CODE**

        });
        return false;
     };
     $(".btn").live('click',function(){
       $(this).parents("tr:first").remove();
     });
     });

Upvotes: 0

Related Questions