Как обрабатывать несколько входов в одной форме в Laravel?

Question

У меня есть форма, в которой я прошу пользователя отметить свою посещаемость, я отправляю Carbon::now() в качестве скрытого ввода по умолчанию, когда пользователь нажимает кнопку, он должен быть сохранен в базе данных, но проблема в том, что у меня есть четыре поля, подобные этому, и всякий раз, когда я нажимаю кнопку отправки, в нем хранятся все значения поля. Я новичок в этом деле, пожалуйста, помогите мне. Я в том числе и код.

Вид:

<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>

Контроллер:

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.');
}

Что мне нужно сделать, это:

1. Когда пользователь нажимает кнопку «Пометить», ему следует сохранить значение этого конкретного поля и остальные поля с нулем, поскольку все столбцы могут иметь значение NULL.
2. Как только пользователь нажмет кнопку и значение будет успешно сохранено в БД, кнопка должна быть заменена кнопкой отметки и отключена до следующего дня, то есть до полуночи.

Любая помощь будет высоко оценена. Извините за неправильное форматирование вопроса, так как не использовал переполнение стека.

Answer 1

Пожалуйста, попробуйте это,

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

Звучит как работа для AJAX.

Шаг 1:

Добавление общего класса ко всем кнопкам

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

Шаг 2:

Возьмите данные и отправьте их с помощью AJAX (используя 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 );
        }
     });
  });

Шаг 3:

Обновите контроллер

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.');
}