How to handle multiple inputs in a single form in laravel?

Question

I have a form in which I am asking user to mark their attendance, I am sending Carbon::now() as default and hidden input, whenever user hits the button it should be stored in the database but the issue is that I have four fields like this and whenever I hit submit button it store all the field's values. I am new to this thing, please help me. I am including code as well.

View:

<div class="card" style="max-width: 600px; margin:auto; margin-bottom:50px;margin-top:40px;">
    <div class="card-header" style="text-align:center">
        Today: @php $today = \Carbon\Carbon::now()->format('d-m-Y'); @endphp &nbsp; {{$today}}
    </div>
    <form action="{{ route('timesheet.store') }}" method="POST">
        @csrf
    <div class="card-body">
        @php
            $now = \carbon\Carbon::now();
        @endphp
        <ul class="list-group">
            <li class="list-group-item">
                <label for="in_time">Day start</label>
                <input name="in_time" type="datetime" style="display:none" value="{{$now}}">
                <span style="float:right"><button type="submit" class="btn btn-success btn-sm">Mark</button></span>
            </li>
            <li class="list-group-item">
                <label for="break_out">Break-out</label>
                <input name="break_out" type="datetime" style="display:none" value="{{$now}}">
                <span style="float:right"><button type="submit" class="btn btn-success btn-sm">Mark</button></span>
            </li>
            <li class="list-group-item">
                <label for="break_in">Break-in</label>
                <input name="break_in" type="datetime" style="display:none" value="{{$now}}">
                <span style="float:right"><button type="submit" class="btn btn-success btn-sm">Mark</button></span>
            </li>
            <li class="list-group-item">
                <label for="out_time">Day end</label>
                <input name="out_time" type="datetime" style="display:none" value="{{$now}}">
                <span style="float:right"><button type="submit" class="btn btn-success btn-sm">Mark</button></span>
            </li>
        </ul>
    </div>
    </form>
</div>

Controller:

public function store(Request $request)
{
    Timesheet::create([
        'in_time' => request('in_time'),
        'out_time' => request('out_time'),
        'break_out' => request('break_out'),
        'break_in' => request('break_in'),
        'user_id' => Auth::user()->id,
    ]);


    return redirect()->route('timesheet.create')
        ->with('success', 'Attendance marked successfully.');
}

What I have to do is:

1. When user hits the "Mark" button, it should that particular field's value and rest of the fields should be stored with the null as all the columns are nullable.
2. Once user hit the button and value is successfully stored in DB, button should be replaced with the tick mark button and should be disabled till next day, i.e. midnight.

Any help will be highly appreciated. Sorry for bad formatting of question since have not used stack overflow.

Answer 1

Kindly try this,

public function store(Request $request)
{
    Timesheet::create([
        'in_time' => $request->get('in_time'),
        'out_time' => $request->get('out_time'),
        'break_out' => $request->get('break_out'),
        'break_in' => $request->get('break_in'),
        'user_id' => \Auth::user()->id,
    ]);


    return redirect()->route('timesheet.create')
        ->with('success', 'Attendance marked successfully.');
}

Answer 2

This sounds like a job for AJAX.

Step 1:

Add common class to all buttons

// new time-btn class
<span style="float:right"><button type="submit" class="btn btn-success btn-sm 
btn time-btn">Mark</button></span>

Step 2:

Take the data and send it with AJAX(using jquery):

$(document).on('click', '.time-btn', function(e) {
   e.preventDefault();

   // get value of first input before the button
   var time = $(this).prev('input').val();
   // get input name
   var name = $(this).prev('input').attr('name')

   // validate time if necessary

     $.ajax({
        url: '/time/store', // insert route url here
        type: 'POST',
        data: {time: time, name: name},
        success: function( response ) {
            response = JSON.parse( response );
           // add tick mark to button here
        },
        error: function (xhr, status, error) {
            console.log( xhr.responseText );
        }
     });
  });

Step 3:

Update the controller

public function store(Request $request)
{   

Timesheet::create([
    'in_time' => request('name') == 'in_time' ? request('time') : null,
    'out_time' => request('name') == 'out_time' ? request('time') : null,
    // do the same for tother
    ...
    'user_id' => Auth::user()->id,
]);


return redirect()->route('timesheet.create')
    ->with('success', 'Attendance marked successfully.');
}