Laravel выбрать несколько значений с переключателем на пользователя

Question

Я создал пользовательские переключатели, которые будут выбирать Присутствие раздел Да или Нет в зависимости от пользователя. Но когда я щелкаю по первому пользователю, следующий пользователь не может щелкнуть по разделу Присутствие .

Это вид

Это мой код просмотра

<table>
    <thead>
        <tr>
            <th>No.</th>
            <th>Name</th>
            <th>
                <center>Presence</center>
            </th>
        </tr>
    </thead>
    <tbody>
    @php
        $i=1;
    @endphp
    @foreach ($employee as $employee)
    <tr>
        <td>{{ $i }}</td>
        <td>{{ $employee->name }}</td>
        <td>
            <input type="hidden" name="_token" value="{{ csrf_token() }}" />
            <input type="radio" id="radio1" name="presence" value="Y" />
            <label for="radio1">
                <font color="#00B01D">
                <i class="fas fa-check"/> Yes</font>
            </label>
            <input type="radio" id="radio2" name="presence" value="N" />
            <label for="radio2">
                <font color="#FF0000">
                <i class="fas fa-times"/> No</font>
            </label>
        </td>
    </tr>
    @php
        $i++;
    @endphp
    @endforeach
    </tbody>
</table>

<script>
$(document).ready(function() {
    $('input[type="radio"]').click(function(){
        var presence = $(this).val(); 
        $.ajax({  
            url:"{{ url('http://localhost/admin/presence/add') }}",
            method:"POST",
            data:{
                presence:presence,
                _token: $('input[name=_token]').val()
            },
            success:function(result){
            }
        });
    });
});
</script>

и это моя функция контроллера

public function addprespost(Request $request)
{
    $dataz = [
        'presence' => $request->input('presence'),
    ];
    DB::table('presence')->insert($dataz);
    return redirect('/admin/presence/add');
}

Это таблица после успешной вставки данных

Answer 1

Подходящим прослушивателем событий jQuery для переключателей и флажков является прослушиватель событий change.См. Документацию jquery api .В частности, этот абзац.

Событие изменения отправляется элементу при изменении его значения.Это событие ограничено элементами, ящиками и элементами.Для полей выбора, флажков и переключателей событие запускается сразу, когда пользователь делает выбор с помощью мыши, но для других типов элементов событие откладывается до тех пор, пока элемент не потеряет фокус.

, поэтому вы должны изменить свой сценарий следующим образом:

$(document).ready(function() { 
    $('input[type="radio"]').change(function(){ 
        var presence = $(this).val(); 
        $.ajax({ 
            url:"{{ url('http://localhost/admin/presence/add') }}", 
            method:"POST", 
            data:{ 
                presence:presence, 
                _token: $('input[name=_token]').val()
            }, 
            success:function(result){ } 
        }); 
    }); 
}); 

Однако отправка данных обновления асинхронно в вашу базу данных таким способом может быть не выгодна с точки зрения производительности.см. мой комментарий к исходному сообщению.

Answer 2

Для каждой сгенерированной строки присутствия необходимо указать уникальное имя для группы радиосвязи.В настоящее время имя одинаково для каждой строки, поэтому все переключатели являются частью одной группы.Примерно так должно быть достаточно:

<input type="radio" id="radio1" name="presence-{{$i}}" value="Y" />
<label for="radio1">
    <font color="#00B01D">
        <i class="fas fa-check"/> Yes</font>
</label>
<input type="radio" id="radio2" name="presence-{{$i}}" value="N" />
<label for="radio2">
    <font color="#FF0000">
        <i class="fas fa-times"/> No</font>
</label>        

Радиокнопки