How to pass cell values of a to a controller through ajax by clicking on a button?

Question

I want to get every cell value individually. Here I included jQuery what I used to get one cell value, but it's not working (I got all of cell values with .each function, but not individually). Actually I want to pass all cell values of a row to a controller on click on a cell of same row. What is efficient way?

$(function(){
    $('#product_table').on('click', '#add', function(){
        var p_name = ($(this).closest("tr").find('#p_name').text());
        alert (p_name);
        
       
      /* var token= {{csrf_token()}}
         $.ajax({
            method:"post",
            url:"{{ route('product.edit') }}",
            data: {p_name:p_name, _token:token},
            success:function (response) {
                location.reload();
            }

        });
        $(this).parents("tr").find(".add, .edit").toggle();
        $(".add-new").removeAttr("disabled");
      */
        
    });
});

<table class="table table-bordered table-hover" id="product_table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Details</th>
            <th>Price</th>
            {{--<th>Image(s)</th>--}}
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
    @if($products->count()>0)
        @foreach($products as $product)
        <tr>
            <td id="p_name">{{$product->name}}</td>
            <td id="p_details">{{$product->details}}</td>
            <td id="p_price">{{$product->price}}</td>
            <td>
              <a class="add" id="add" data-id="{{$product->id}}" title="Add"></a>
              <a class="edit" title="Edit"></a>
              <a class="delete"  title="Delete" data-id="{{$product->id}}"></a>
            </td>
        </tr>
        @endforeach
    @else
        <tr>
            <td colspan="4" class="text-center bg-danger">No Product Data Found</td>
        </tr>
    @endif
    </tbody>
</table>

Well, one thing `class="add"` would not match the `#add` selector on the delegate event listener. Edit: And you can't repeat ids like that with the `p_name`, `p_details`, and `p_price`. Those need to be classes as well. — Taplar, Mar 22 '19 at 17:51
Possible duplicate of [Does ID have to be unique in the whole page?](https://stackoverflow.com/questions/9454645/does-id-have-to-be-unique-in-the-whole-page) — Taplar, Mar 22 '19 at 17:52
@Taplar Oops, It was a mistake during constructing code here. There was an ID too named "add" in my code, and still it's not working. — M. Kamrul H., Mar 22 '19 at 18:36
Thanks for contributing. The Cause of error was that, toggle() function. When I changed add class, and toggle() function not working, I got my desired output. @Taplar — M. Kamrul H., Mar 22 '19 at 18:47

score 1 · Accepted Answer · answered Mar 22 '19 at 17:52

You can loop through all td on row and check if has attribute id. Then create an array and push that td value in array as below:

$('#product_table').on('click', '#add', function(){
                dataString = {};
                $(this).closest("tr").find('td').each(function(){
                    let attrId = $(this).attr('id');
                    if (typeof attrId !== typeof undefined && attrId !== false) {
                        dataString[attrId] = $(this).text();
                    }
                });


                 var token = {{csrf_token()}};
                 $.ajax({
                    method:"post",
                    url:"{{ route('product.edit') }}",
                    data: {data:dataString, _token:token},
                    success:function (response) {
                        location.reload();
                    }

                });
                $(this).parents("tr").find(".add, .edit").toggle();
                $(".add-new").removeAttr("disabled");


            });

Hope it helps you.

Thank for contributing. There was toggle() function in my code in localhost, and class 'add' was not working when it toggled. May be it was a cause of error. — M. Kamrul H., Mar 22 '19 at 18:42

How to pass cell values of a to a controller through ajax by clicking on a button?

1 Answers1