CODEWITHSUNDEEP
phplaravellaravel-livewire
Jaideep Dey
Jaideep Dey

Reputation: 11

Selected option value always null in Laravel Livewire form submit

I am relatively new to Laravel Livewire and struggling with this. I have a form that has a single select input, and on submit, it goes to the store function of the Livewire component and I wish to capture the selected option to process the data further.

Now, the form renders correctly; the select input is populated dynamically.

  1. On FIRST submit, the field value is always null, and when the livewire component, which includes the form, is reloaded, the select input loses its CSS, and I cannot figure out why.

  2. On SECOND submit, I see that the select input selected option is captured, which I am doing through an "updated" method, but the public property is still null. Extremely confused about this.

How can I fix these two issues? I'm using Laravel Framework 8.33.1 and Livewire v2.4.1.

View

<form class="edit-profile m-b30" method="POST" wire:submit.prevent="store">
    <div class="row">
        <!-- Your Profile Views Chart -->
        <div class="col-lg-12 m-b30">
            <div class="widget-box">
                <div class="widget-inner">
                    <div class="row">
                        <div class="col-12">
                            <div class="heading-bx left">
                                <h2 class="title-head">Registration</span></h2>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="ml-auto">
                                <h3>Course Details</h3>
                            </div>
                        </div>
                        <div class="form-group col-6">
                            <label class="col-form-label">Select Course</label>
                            <div>
                                <select class="form-control" name="course" wire:model="course">
                                    <option value="">Select Course</option>
                                    @foreach($courses as $course)
                                    <option value="{{ $course->id }}">{{ $course->Name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="seperator"></div>
                        <div class="col-12">
                            <button class="btn" name="submit" type="submit">Apply</button>
                            <button class="btn-secondry" type="reset">Cancel</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

Class

class ApplyOnlineComponent extends Component
{
    public $courses;
    public $course;

    public function render()
    {
        return view('livewire.apply-online-component')->layout('layouts.base');
    }

    public function resetInputFields()
    {
        $this->reset();
    }

    public function updatedCourse($value)
    {
        $this->course = $value;
        Log::info('Inside updated. Selected course:'.$this->course);
        dd($value); // Works on second submit
    }

    public function mount()
    {
        Log::info('Inside mount');
        $this->courses = Courses::all();
    }

    public function store()
    {
        Log::info('Inside store of online registration. 
            Selected course:'.$this->course); // This always null
    }
}

Upvotes: 1

Views: 4017

Answers (3)

AMIN
AMIN

Reputation: 248

<select wire:model.lazy="course">

By default, Livewire sends a request to the server after every input event (or change in some cases). This is usually fine for things like <select> elements that don't typically fire rapid updates, however, this is often unnecessary for text fields that update as the user types.

In those cases, use the lazy directive modifier to listen for the native change event.

Upvotes: 2

hesam mahmoodi
hesam mahmoodi

Reputation: 1

i have similar problem and solve it.i think your public $course in class and $course in foreach in your blade have conflict.set another name for $curse in your foreach ex($item) and check it again.

Upvotes: 0

Koussay
Koussay

Reputation: 183

It seems your code works pretty fine, because I just copied your code and inside the log file here's what it says

[2021-07-04 00:01:51] local.INFO: Inside updated. Selected course:3  
[2021-07-04 00:01:54] local.INFO: Inside store of online registration.
            Selected course:3  
[2021-07-04 00:01:59] local.INFO: Inside updated. Selected course:1  
[2021-07-04 00:02:01] local.INFO: Inside store of online registration.
            Selected course:1  
[2021-07-04 00:05:17] local.INFO: Inside mount  
[2021-07-04 00:05:25] local.INFO: Inside updated. Selected course:2  
[2021-07-04 00:05:27] local.INFO: Inside store of online registration.
            Selected course:2

I even tested with Bootstrap , and it's pretty okay as well, no CSS classes lost whatsoever. However I used Livewire version 2.5.1 and Laravel 8.5 .

Update: It seems like the dd() you put inside the updatedCourse() is causing all the problems, because I copied your code as it is, and here's what it produced:

[2021-07-04 00:10:15] local.INFO: Inside mount  
[2021-07-04 00:10:18] local.INFO: Inside updated. Selected course:1  
[2021-07-04 00:10:18] local.INFO: Inside store of online registration.
            Selected course:1  
[2021-07-04 00:10:24] local.INFO: Inside mount  
[2021-07-04 00:10:28] local.INFO: Inside updated. Selected course:3  
[2021-07-04 00:10:31] local.INFO: Inside store of online registration.
            Selected course:  
[2021-07-04 00:10:33] local.INFO: Inside updated. Selected course:2  
[2021-07-04 00:10:38] local.INFO: Inside store of online registration.
            Selected course:  
[2021-07-04 00:10:38] local.INFO: Inside store of online registration.
            Selected course:  
[2021-07-04 00:10:42] local.INFO: Inside updated. Selected course:3  
[2021-07-04 00:10:44] local.INFO: Inside store of online registration.
            Selected course:

Try to remove it and see what happens. Also it would be nice if you showed your log file as well.

Upvotes: 1

Related Questions