Laravel Livewire: Radio button not properly working

Question

In the applications, there are 2 tabs:

Personal Details
Interview Questions

In the interview questions, it is a setup coming from configurations and there is a radio button "Yes" or "No"

In this example,

In question # 1, I choose "Yes" but the value changed in question # 3 not in the question # 1.

Below is my code for in getting the interview questions

Controller

public $interivew_questions = [];
public $answers = [];

$interview_questions                = InterviewQuestions::where('company_id', Auth::user()->company_id)
                                                        ->where('active',1)
                                                        ->get();

        foreach ($interview_questions as $i_q => $interview_question) {
            # code...
            $this->interview_questions[] = 
            [
                'remarks' => $interview_question->remarks,
                'answer' => "",
            ];
        }

View

<?php $counter = 0; ?>
@foreach($interview_questions as $i_q => $interview_question)
    <?php $counter++; ?>
    <div class="row mb-3">
        <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
            <span style="font-weight: bolder; display: inline;">{{ $counter }}.</span>
        </div>
        <div class="col-xs-11 col-sm-11 col-md-11 col-lg-11">
             <p wire:model="interview_questions.{{$i_q}}.remarks"> {{ $interview_question['remarks'] }}</p>
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5 offset-md-1 offset-xs-1 offset-sm-1 offset-lg-1">
            <label>
                <input type="radio" wire:model="answers" name="answers" value="YES" /> YES
                <!-- <input type="radio" wire:model="interview_questions.{{$i_q}}.answer" name="answers" value="YES" /> YES -->
            </label>
            <label>
                <input type="radio" wire:model="answers" name="answers" value="NO" /> NO
                <!-- <input type="radio" wire:model="interview_questions.{{$i_q}}.answer" name="answers" value="NO" /> NO -->
            </label>
        </div>
    </div>
@endforeach

UPDATED POST

I removed the name in my input field, it is now getting the correct answer in corresponding questions but it can now check both "Yes" or "No"

Question: How do I get the correct answer for corresponding question #?

Perhaps you need to use the commented out inputs instead? I'm not familiar with livewire but I can guess it is an input id issue here. — 3nws
– 3nws, Commented Aug 15, 2023 at 8:39

Yinci · Accepted Answer · 2023-08-16 08:05:29Z

1

You're simply using the wrong wire:model. Livewire tries to be smart. Since your property is an array, Livewire considers it multiple choice. When using the correct syntax, Livewire will handle the selection and deselection of radio and checkbox types.

Your commented input has the correct syntax but simply points to the wrong property.

<input type="radio" wire:model="answers.{{$i_q}}.answer" value="YES"/>
<input type="radio" wire:model="answers.{{$i_q}}.answer" value="NO"/>

P.S. you should never use name attribute when using Livewire. It's simply unnnecessary.

answered Aug 16, 2023 at 8:05

Yinci

2,5901 gold badge5 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Laravel Livewire: Radio button not properly working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related