Multiple Form Submit - Laravel

Question

I have my edit.blade.php file as below mentioned

<table class="table">
                <thead>
                    <tr>
                        <th>Vendor</th>
                        <th>Item</th>
                        <th>Qty</th>
                        <th>Rate</th>
                        <th>Total</th>
                        <th>Description</th>
                        <th>Job No</th>
                    </tr>

                </thead>
                <tbody>
                    @foreach ($po_items as $po_item)
                        <tr>
                                <td><input type="text" class="form-control" name="vendor_name[]" id="vendor_name" value="{{$po_item->cost_item->vendor_company->name}}" readonly></td>
                                <td><input type="text" class="form-control" name="item_name[]" id="item_name" value="{{$po_item->cost_item->item->name}}" readonly></td>
                                <td><input type="text" class="form-control" name="qty[]" id="qty" value="{{$po_item->qty}}"></td>
                                <td><input type="text" class="form-control" name="rate[]" id="rate" value="{{$po_item->rate}}"></td>
                                <td><input type="text" class="form-control" name="total[]" id="total" value="{{$po_item->qty * $po_item->rate}}"></td>
                                <td><input type="text" class="form-control" name="description[]" id="description" value="{{$po_item->description}}"></td>
                                <td><input type="text" class="form-control" name="job_id[]" id="job_id" value="{{$po_item->cost_item->job_id}}" readonly></td>
                                <td>
                                    <form action="{{action('Employee\POItemController@destroy', $po_item->id)}}" method="post">
                                            {{csrf_field()}}
                                            {{method_field('DELETE')}}
                                            <button class="btn btn-danger" type="submit">Delete</button>
                                    </form>
                                </td>                          
                        </tr>
                    @endforeach 
                </tbody>


            </table>




            <form action="{{ route('employee.poitem.update', $vendor_company_id )}}" method="post">            
                {{csrf_field()}}
                {{method_field('PATCH')}}
                @foreach ($po_items as $po_item)
                    <input type="hidden" name="cost_item_id[]"  value="?">
                    <input type="hidden" name="qty[]" value="?">
                    <input type="hidden" name="rate[]" value="?">
                    <input type="hidden" name="description[]" value="?">
                    @endforeach          


                <button type="submit" class="btn btn-primary">Update</button>
            </form>

Since there are two forms in the same page, i find it hard to pass new form values to the update function . I read on using the same session to solve this issue, but it wasn't clear enough for me to proceed with it

Answer 1

Instead of Making delete form you can do it with anchor tag. I don't know it is correct way or not but it works fine.

<a href="{{action('Employee\POItemController@destroy', $po_item->id)}}">Delete</a>

Hope this helps :)

Answer 2

Your input id values are incorrect. In HTML, an id should be unique across all HTML tags. When you make a foreach :

@foreach ($po_items as $po_item)
<tr>
        <td><input type="text" class="form-control" name="vendor_name[]" id="vendor_name" value="{{$po_item->cost_item->vendor_company->name}}" readonly></td>                         
</tr>
@endforeach

you're assigning all inputs vendor_name to same id="vendor_name , which is W3C incorrect. You could use instead

@foreach ($po_items as $po_item)
<tr>
        <td><input type="text" class="form-control" name="vendor_name[]" id="vendor_name_{{$po_item->id}}" value="{{$po_item->cost_item->vendor_company->name}}" readonly></td>                         
</tr>
@endforeach

But that's not the real problem here, you need upon submitting the UPDATE Form to read each input data and pushes it in hidden inputs.

Do you use vanilla Javascript or JQuery? With JQuery you can achieve it easier, you must put some scripts on the page that contains the forms. The idea is to find each input value for like qty, push them into array and convert that array to JSON string and put that JSON string as value to hidden qty input. Try this codes :

<table class="table">
    <thead>
        <tr>
            <th>Vendor</th>
            <th>Item</th>
            <th>Qty</th>
            <th>Rate</th>
            <th>Total</th>
            <th>Description</th>
            <th>Job No</th>
        </tr>

    </thead>
    <tbody id="table_inputs">
        @foreach ($po_items as $po_item)
            <tr>
                <td><input type="text" class="form-control" name="vendor_name[]" id="vendor_name_{{$po_item->id}}" value="{{$po_item->cost_item->vendor_company->name}}" readonly></td>
                <td><input type="text" class="form-control" name="item_name[]" id="item_name_{{$po_item->id}}" value="{{$po_item->cost_item->item->name}}" readonly></td>
                <td><input type="text" class="form-control" name="qty[]" id="qty_{{$po_item->id}}" value="{{$po_item->qty}}"></td>
                <td><input type="text" class="form-control" name="rate[]" id="rate_{{$po_item->id}}" value="{{$po_item->rate}}"></td>
                <td><input type="text" class="form-control" name="total[]" id="total_{{$po_item->id}}" value="{{$po_item->qty * $po_item->rate}}"></td>
                <td><input type="text" class="form-control" name="description[]" id="description_{{$po_item->id}}" value="{{$po_item->description}}"></td>
                <td><input type="text" class="form-control" name="job_id[]" id="job_id_{{$po_item->id}}" value="{{$po_item->cost_item->job_id}}" readonly></td>
                <td>
                    <form action="{{action('Employee\POItemController@destroy', $po_item->id)}}" method="post">
                        {{csrf_field()}}
                        {{method_field('DELETE')}}
                        <button class="btn btn-danger" type="submit">Delete</button>
                    </form>
                </td>
            </tr>
        @endforeach
    </tbody>

</table>


<form id="form_update_poitem" action="{{ route('employee.poitem.update', $vendor_company_id )}}" method="post">            
    {{csrf_field()}}
    {{method_field('PATCH')}}
    @foreach ($po_items as $po_item)
        <input type="hidden" name="cost_item_id[]" >
        <input type="hidden" name="qty[]" >
        <input type="hidden" name="rate[]" >
        <input type="hidden" name="description[]" >
    @endforeach
    <button type="submit" class="btn btn-primary">Update</button>
</form>

<script>

$(document).ready(function() {

    console.log('document is ready, proceed to form update codes');

    // find button form
    var button = $('#form_update_poitem button');

    // add onclick event
    button.on('click', function(e){
        // find input array input values, turn them into array and pass that array to Hidden Input array
        var itemArr = [];
        $("#table_inputs input[type='item_name']").each(function(){
            itemArr.push($(this).val());
        });
        console.log(itemArr);
        $("#form_update_poitem input[type='cost_item_name']").val(JSON.stringify(itemArr));

        var qtyArr = [];
        $("#table_inputs input[type='qty']").each(function(){
            qtyArr.push($(this).val());
        });
        console.log(qtyArr);
        $("#form_update_poitem input[type='qty']").val(JSON.stringify(qtyArr));

        var rateArr = [];
        $("#table_inputs input[type='rate']").each(function(){
            rateArr.push($(this).val());
        });
        console.log(rateArr);
        $("#form_update_poitem input[type='rate']").val(JSON.stringify(rateArr));

        var descriptionArr = [];
        $("#table_inputs input[type='description']").each(function(){
            descriptionArr.push($(this).val());
        });
        console.log(descriptionArr);
        $("#form_update_poitem input[type='description']").val(JSON.stringify(descriptionArr));

    });

});

</script>