Passing form data from Child to Parent Component

[chetan.chitte]

What seems to be the problem: Unable to pass the HTML Form Data to it’s Parent Livewire Component.

Steps to Reproduce: Custom Code

Are you using the latest version of Livewire: Yes

Do you have any screenshots or code examples: Yes

Here is my Parent Component Name “BaseForm”

<?php

namespace App\Http\Livewire\Employee;

use Livewire\Component;
use App\Models\Employee;
use Illuminate\Http\Request;

class BaseForm extends Component
{
    // Parent
    public $current_tab = 1;
    public $tabs = [
        1   => [
            'title' => 'Employee',
            'links_to'  => 'employee'
        ],
        2   => [
            'title' => 'Professional',
            'links_to'  => 'professional'
        ],
        3   => [
            'title' => 'Bank',
            'links_to'  => 'bank'
        ],
        4   => [
            'title' => 'Declaration',
            'links_to'  => 'declaration'
        ],
        5   => [
            'title' => 'Salary',
            'links_to'  => 'salary'
        ],
        6   => [
            'title' => 'Payslips',
            'links_to'  => 'payslips'
        ],
        7   => [
            'title' => 'Attendance',
            'links_to'  => 'attendance'
        ],
        8   => [
            'title' => 'Previous Jobs',
            'links_to'  => 'previousJobs'
        ]
    ];

    protected $employee_form_data;

    public function goToNextTab()
    {
        $this->current_tab++;
    }

    public function goToPreviousTab()
    {
        $this->current_tab--;
    }

    public function submit()
    {
        
        dd($name); //My Objective is to get that submitted $name variable value here so that I can submit and create new Employee  record.

        $employee = Employee::create([
            'name' => $this->name
        ]);

        $this->reset();
    }
    
    public function render()
    {
        return view('livewire.employee.base-form');
    }
}

Here is my Child Component Name “EmployeeForm” <- So basically I have 1 massive HTML form that I have divided into 8 parts therefore I’ve created one BaseForm component in it’s blade file I’ve included such 8 child components.

<?php

namespace App\Http\Livewire\Employee;

use Livewire\Component;

class EmployeeForm extends Component
{
    public $name;

    public function render()
    {
        return view('livewire.employee.employee-form');
    }
}

base form includes form the code is as per below:

<livewire:employee.employee-form />

Child form includes input filed like this

<div class="form-group col-4">
<x-label class="font-weight-normal font-italic small" for="name" :value="__('Name')" />
 <x-input wire:model.lazy="name" id="name" type="text" name="name" :value="old('name')" placeholder="John Doe" required />
 Hello {{ $name }}
</div>

Any quick help would be greatly appreciated.

[prospero]

You could have a button to submit the name on the child form and on click emit and event to parent with the property value.

<div class="form-group col-4"> 
  <x-label class="font-weight-normal font-italic small" for="name" :value="__('Name')" /> 
  <x-input wire:model.lazy="name" id="name" type="text" name="name" placeholder="John Doe" required /> 
 <button class="" wire:click="save" >Save</button>
Hello {{ $name }} 
</div>
//.... child component
public function save()
{
   $this->emit('nameToParent',$this->name);
}

and in the parent component

public $name;
protected $listeners = [
   'nameToParent'
];

public function nameToParent($value)
{
    dd($value);
    $this->name = $value;
}

[chetan.chitte]

Hello @prospero (Dayron),

Namaste from India.

Your solution worked like a charm! Thank you very much for that.

But please check the Screenshot of the application that I am working on. It has multi-steps form and I think all together there are more than 52 input fileds in there. Now I got couple of challanges which makes the entire module/section code very lengthly and cumbersome. If you can please help/advise how can I deal those challanges that would be really helpful to me.

1. Save Button that you suggested does the trick but it would be awesome if there is a way so that after filling up required fields in Employee and respective tabs as soon as someone hits Next/Submit button the data gets Submitted/Emitted to it’s Parent Component without having them click on Save Button?

2. As you can see in my Employee tab alone I’ve 13 input fields so I’ve to define variables for each into it’s Children as well as Parent Component which like repeating the same work. I am wondering if there is any solution/simple way to address this?

Greatly appreciate your help Sir.

Many thanks.

Regards,
Chetan Chitte