Laravel livewire mount/save input field if others is selected

Question

How can I mount/save input field value if 'Others' is selected?

Controller:

public Applicant $applicant;

public $eligibilityInput;

public function mount(Applicant $applicant)
{
    $this->applicant = $applicant;
    if ($this->applicant->eligibility === 'Others'){
        $this->applicant->eligibility = $this->eligibilityInput;
    }
}

Blade:

<div class="form-group {{ $errors->has('applicant.eligibility') ? 'invalid' : '' }}">
    <label class="form-label required">{{ trans('cruds.applicant.fields.eligibility') }}</label>
    <select class="form-control" wire:model="applicant.eligibility">
        <option value="null" disabled>{{ trans('global.pleaseSelect') }}...</option>
        <option value="option1" >option1</option>
        <option value="option2" >option2</option>
        <option value="Others" >Others</option>
    </select>
    <div class="validation-message">
        {{ $errors->first('applicant.eligibility') }}
    </div>
    <div class="help-block">
        {{ trans('cruds.applicant.fields.eligibility_helper') }}
    </div>
    @if ($applicant->eligibility === 'Others')
        <div class="form-group"  style="display: block;">
            <label class="form-label required" for="eligibilityInput">Input Eligibility</label>
            <input class="form-control" type="text" wire:model="eligibilityInput" name="eligibilityInput" id="eligibilityInput" style="text-transform:uppercase">
        </div>
    @endif
</div>

When submitted, Others is saved when I need it to be the input field value. Any help would be much appreciated.

Answer 1

Since you don't want to save down the Others value, but you use it to check in the view, you have to manipulate the data a little before you output it in mount() and also before saving it.

I don't know what the rest of your code looks like, so here's some example-code, I assume that the data is saved when the save() method is called.

Here we initially set the input-value from the eligibility property and the eligibility property to Others if the value was not in one of the valid options in the select.
Then, when you save the data, you need to go the other way around -- if the eligibility is equal to Others, then instead save the value from the input.

If you have more options that can be chosen from the select, then you need to update the array in !in_array() inside mount().

public function mount(Applicant $applicant)
{
    $this->applicant = $applicant;
    
    // Set the value of the input and fake the "Others" option selection
    if ($this->applicant->eligibility && !in_array($this->applicant->eligibility, ['option1', 'option2'])) {
        $this->eligibilityInput = $this->applicant->eligibility;
        $this->applicant->eligibility = 'Others';
    }
}

public function save()
{
    // When the value is Others, we actually save the input instead
    if ($this->applicant->eligibility === 'Others') {
        $this->applicant->eligibility = $this->eligibilityInput;
    }
    $this->applicant->save();
}

If you're not redirecting away after saving, you should probably reset the sate after saving, the same way its done in mount(), so that nothing changes for the user, something like this

public function mount(Applicant $applicant)
{
    $this->applicant = $applicant;

    // Set the value of the input and fake the "Others" option selection
    if ($this->applicant->eligibility && !in_array($this->applicant->eligibility, ['option1', 'option2'])) {
        $this->eligibilityInput = $this->applicant->eligibility;
        $this->applicant->eligibility = 'Others';
    }
}

public function save()
{
    // When the value is Others, we actually save the input instead
    $resetState = false;
    if ($this->applicant->eligibility === 'Others') {
        $this->applicant->eligibility = $this->eligibilityInput;
        $resetState = true;
    }

    $this->applicant->save();

    if ($resetState) {
        $this->applicant->eligibility = 'Others';
    }
}