Update td value that are inside a php foreach loop with ajax

Question

I'm sending data from MySql query to a blade.php. I'm passing this data to a table.

Then I've got a php foreach loop that iterates through each row from the query.

I'm trying to update individual lines from the td with ajax but no matter which row you update it always takes the last rows values and updates all the rows to the same values.

It's also not passing the correct id through to the ajax request. it passes the first rows id through but updates with the last rows data.

Could you please assist me in finding my issue.

The idea here is to be able to update individual lines. So I want to pass the value from the the hidden input with name="phone_id" to my php function via my ajax request. Currently it passes only the first rows value from the hidden input field.

First the form

<div class="row">

            <div class="col-12 col-md-8 offset-md-2 text-center mt-30 rename">

                <table class="table">
                    <thead>
                    <tr>
                        <th scope="col">Number</th>
                        <th scope="col">Description</th>
                        <th scope="col">Balance</th>
                        <th scope="col">Actions</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach ($phones as $phone)
                        <tr>
                            <th scope="row"><input value="{{$phone->phone_account}}" type="text" name="phone_account{{$phone->phone_id}}"></th>
                            <td><input value="{{$phone->description}}" type="text" name="description{{$phone->phone_id}}"></td>
                            <td><input value="{{ $phone->balance }}" disabled></td>
                            <td>
                                <input type="text" value="{{ $phone->phone_id }}" name="phone_id" hidden>
                                <input id="VerifyBtn" onclick="postData()" type="submit" class="btn btn-profile" value="Update">
                                <a href="{{ route('phonedelete', ['id'=>$phone->phone_id]) }}" role="button" class="btn btn-profile">Delete</a>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>

            </div>

        </div>

    </div>

Ajax request

function postData() {
                var id = $("input[name=phone_id]").val();
                var phone_account = $("input[name=phone_account{{$phone->phone_id}}]").val();
                var description = $("input[name=description{{$phone->phone_id}}]").val();
                var user_id = {{$phone->user_id}};
                $.ajax({
                    url: '{{ route('update_phone.post')}}',
                    type: 'POST',
                    data: {
                        phone_account: phone_account,
                        description: description,
                        user_id: user_id,
                        id:id,
                    },
                    cache: false,
                    success: function (data) {
                        var data = data;
                        console.log(data)
                        if (data == 'success') {
                            $('#success').show();
                            $('#success').html('phone account successfully updated.');
                        }else{
                            alert('Error occurred, please try again later...');
                        }
                    }
                });
            }

update function

public function update_phone(Request $request){

        $id = $request->id;
        $user_id = $request->user_id;
        $phone_acc = $request->phone_account;
        $phone_desc = $request->description;
        $date = date("Y-m-d H:i:s");
        DB::table('phone_details')
            ->where('user_id', $user_id)
            ->where('phone_id', $id)
            ->update(['phone_account' => $phone_acc,
                      'description' => $phone_desc,
                      'updated_at' => $date]);
  
        echo 'success';

    }

assign id to tr and use it in ajax.

Ravi Hirani
– Ravi Hirani

2021-05-28 01:12:36 +00:00
Commented May 28, 2021 at 1:12 — Ravi Hirani
– Ravi Hirani, Commented May 28, 2021 at 1:12

Kinglish · Accepted Answer · 2021-05-28 02:15:10Z

1

You could make your life easier and just make the ID relative to each TR, allowing you to clean up some of the inputs, including getting rid of the hidden phone_id input. I changed the name to class because to me it's cleaner looking in jQuery, like this:

@foreach ($phones as $phone)
    <tr data-phoneid="{{$phone->phone_id}}">
        <th scope="row"><input value="{{$phone->phone_account}}" type="text" class="phone-account"></th>
        <td><input value="{{$phone->description}}" type="text" class="phone-description"></td>
        <td><input value="{{ $phone->balance }}" disabled></td>
        <td>
            <input id="VerifyBtn" onclick="postData(this)" type="submit" class="btn btn-profile" value="Update">
            <a href="{{ route('phonedelete', ['id'=>$phone->phone_id]) }}" role="button" class="btn btn-profile">Delete</a>
        </td>
    </tr>
@endforeach

Then in your javscript, it's a little easier to read:

function postData(el) {
    let $parent = $(el).closest('tr');
    var id = $parent.attr('data-phoneid');
    var phone_account = $parent.find('phone-account').val();
    var description = $parent.find('phone-description').val();
    var user_id = @json($phone->user_id);
    $.ajax({
        
        ........
}

edited May 28, 2021 at 2:15

answered May 28, 2021 at 1:12

Kinglish

23.7k4 gold badges25 silver badges43 bronze badges

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

3 Comments

miken32 Over a year ago

Don't insert PHP directly into JS like that. var user_id = @json($phone->user_id); is safer. You can also do $parent.data("phoneid") to access data-attributes which can be a little easier to read.

Kinglish Over a year ago

Thanks @miken32 - I learned something new there

Alex Coetzee Over a year ago

Thank you @Kinglish, Your answer helped me. You just need to add a period before phone-account and phone-description ti specify the class being called. Much appreciated.

Collectives™ on Stack Overflow

Update td value that are inside a php foreach loop with ajax

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related