Delete Button in a loop giving same ID in Laravel App

Question

Good day. There is a list of items with two different buttons in my laravel app. One is for updating while the other deletes. I'm using a form (with POST methods) for the two buttons. So, basically, I have two forms on the page. The "update" button works quite well. But the delete button keep on giving me the same ID when I "dd" the request. I am using javascript to submit the "Delete" form because I want to use sweet alert for the user to confirm delete. The code is shown below. Please what may be wrong with it. Also, I'll be glad if I can get a better way of doing it.

This are my forms

                            <form action="{{route('update.cart')}}" method="POST">
                            {{csrf_field()}}
                                <input type="hidden" name="id" value="{{$product->id}}">
                            <td class="product-quantity"><input type="number" name="quantity" value="{{$product->quantity}}"></td>

                                <td class="product-subtotal">₦{{$product->price * $product->quantity}}</td>
                            <td class="product-remove">
                                <input type="submit" class="login-btn" value="Update"  style="width:90px!important;text-transform: none!important;">

                            </form>

                            <form style="display: inline!important;" action="{{route('remove.cart')}}" method="POST" name="myForm" id="myForm">
                                {{csrf_field()}}
                                <?php
                                $id = $product->id;
                                ?>
                              <input type="hidden" name="cart_id" value="<?php echo $id?>">
                            <button href="#" id="remove" type="button" onclick="removeItem({{$product->id}})"><i class="fa fa-trash" aria-hidden="true"></i></button>

                            </form>

                        </td>

My Javascript Code To Submit The Form

    function removeItem(clicked){
        document.getElementById('myForm').submit();

    }

Controller This gives me the same id in my controller irrespective of the button clicked

        $item = $request->cart_id;
        dd($item);

    }

Answer 1

You are using the id myForm for every delete form. A page is only allowed to have an id once, because you have it multiple times, it always submits the first one.

Either remove the javascript and let the form submit directly or add unique id's for every form.

Answer 2

You can use AJAX to send request to your controller and add sweetalert inside success function provided by ajax.

HTML FORM

<form style="display: inline!important;" action="{{route('remove.cart')}}" method="POST" name="myForm" id="myForm">
     {{csrf_field()}}
     <?php
        $id = $product->id;
        ?>
        <input type="hidden" name="cart_id" value="<?php echo $id?>">
         <button href="#" id="remove" type="button" onclick="removeItem({{$product->id}})"><i class="fa fa-trash" aria-hidden="true"></i></button>

</form>

JQUERY

    var id = $('cart_id').value();
    $('#myForm').onSubmit(function(e){
        e.preventDefault();
        $.ajax({
         method:'POST',
         url:"your link",
         data:{
                id
              },
         success: function(result)
         {
              sweetalert();
         }
         error: function(err) {}


        })
    })
}

Answer 3

Thanks all. Changed my form and javascript to reflect the adjustments.

Form

                                {{csrf_field()}}
                                <?php
                                $id = $product->id;
                                ?>
                              <input type="hidden" name="cart_id" value="<?php echo $id?>">
                            <button href="#" type="button" onclick="removeItem({{$product->id}})"><i class="fa fa-trash" aria-hidden="true"></i></button>

                            </form>

And my JS

    function removeItem(clicked){


        document.getElementById('myForm'+clicked).submit();

    }

</script>