CODEWITHSUNDEEP
laraveluser-interfaceforeachhtml-table
Martin
Martin

Reputation: 557

Clicking on a single button on table in a foreach loop not working

I am working on a Laravel application whereby I have some data that is generated from the backend and am displaying on the view in the form of a table. On the table am doing a foreach loop inside the tbody whereby I display each row together with a button the user can click to submit the data of that particular row. The problem is that when the user clicks on each button on the row nothing happens but when I change the html structure of the table the data gets submitted but the table headers get mis-aligned henceforth destroying the User interface

1st layout which doesnt submit anything after a button is clicked

<table class="table table-hover mg-b-0 tx-11" id="policyTable">
<thead>
    <tr>
    <th>NAME</th>
    <th>INVOICE DATE</th>
    <th>VOUCHER NO.</th>
    <th>INVOICE AMOUNT</th>
    <th>KRA PIN</th>
    <th>STATUS</th>
    <th>PAYOUT</th>
    </tr>
</thead>
   <tbody>
    @foreach($medical as $lifeC)
    <form method="POST" action="{{ route('b2b.medPayout') }}" id="payoutRequest">
        <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">  
        <tr>
            <!-- Hidden input fields that am submitting of a form that am submitting-->
             <input type="hidden" name="agentName" id="agentName" value="{{ $lifeC->agent_name }}">
            <input type="hidden" name="voucherNo" id="voucherNo" value="{{ $lifeC->voucher_number }}">
            <input type="hidden" name="agentCode" id="agentCode" value="{{ $lifeC->agent_code }}">
            <input type="hidden" name="kraPin" id="kraPin" value="{{ $lifeC->kra_pin }}">
            <!--END-->
            <td class="add-color-dark">{{ $lifeC->agent_name }}</td>
            <td>{{ date( 'M j, Y', strtotime($lifeC->invoice_date)) }}</td>
            <td>{{ $lifeC->voucher_number }}</td>
            <td>{{ $lifeC->invoice_amount }}</td>
            <td>{{ $lifeC->kra_pin }}</td>
            <td>
                <span class="badge badge-danger">{{ $lifeC->payment_status }}</span>
            </td>
            <td>
                <button type="submit" class="btn btn-primary btn-sm" id="btnFront" style="cursor: pointer;"> Request </button>      
            </td>
        </tr>
    </form>     
    @endforeach
</tbody>
</table>

2nd layout that submits but the thead are misaligned

 <table class="table table-hover mg-b-0 tx-14">
<thead>
<tr>
    <th>NAME</th>
    <th>INVOICE DATE</th>
    <th>VOUCHER NO.</th>
    <th>INVOICE AMOUNT</th>
    <th>KRA PIN</th>
    <th>STATUS</th>
    <th>PAYOUT</th>
</tr>
</thead>
</table>
<tbody>
        @foreach($medical as $lifeC)
        <!--Add the table insode the form-->
        <form method="POST" action="{{ route('b2b.medPayout') }}" id="payoutRequest">
          <table class="table table-hover mg-b-0 tx-11" id="policyTable">
            <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">  
            <tr>
                 <input type="hidden" name="agentName" id="agentName" value="{{ $lifeC->agent_name }}">
                <input type="hidden" name="voucherNo" id="voucherNo" value="{{ $lifeC->voucher_number }}">
                <input type="hidden" name="agentCode" id="agentCode" value="{{ $lifeC->agent_code }}">
                <input type="hidden" name="kraPin" id="kraPin" value="{{ $lifeC->kra_pin }}">

                <td class="add-color-dark">{{ $lifeC->agent_name }}</td>
                <td>{{ date( 'M j, Y', strtotime($lifeC->invoice_date)) }}</td>
                <td>{{ $lifeC->voucher_number }}</td>
                <td>{{ $lifeC->invoice_amount }}</td>
                <td>{{ $lifeC->kra_pin }}</td>
                <td>
                    <span class="badge badge-danger">{{ $lifeC->payment_status }}</span>
                </td>
                <td>
                    <button type="submit" class="btn btn-primary btn-sm" id="btnFront" style="cursor: pointer;"> Request </button>
                </td>
            </tr>
          </table>
        </form>     
        @endforeach
</tbody>

ScreenshotMisaligned header

Upvotes: 0

Views: 1170

Answers (2)

party-ring
party-ring

Reputation: 1871

If you would like to do it this way, you will need to make the IDs unique for your fields. I suggest dynamically setting them with a unique value for each row, something like:

id="payoutRequest_$lifeC->agent_id"

for every value that has an ID. IDs should always be unique - this means that for each iteration of your loop, the buttons and data being submitted will be unique to that specific row.

Upvotes: 1

Kapitan Teemo
Kapitan Teemo

Reputation: 2164

I suggest you recreate your layout and use ajax instead.

With your current layout, not only you are repeating too many input type hidden, but also the <form> gets repeated each loop and all has the same id(even the buttons, inputs etc).

Try changing your button to something that passes data based on what row the button is located.

Upvotes: 0

Related Questions