Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

WallyJ's avatar

Passing Hidden Field value back to Livewire component is Null

From my old PHP form days, I have a form within a @foreach loop that has a hidden field to capture the deal id, so I can send that on to be used by the controller.

However, if I add

wire:model="deal_id"

to the input field, the deal id no longer shows in the field and the dd($this->deal_id) shows null. I tested this with a text field instead of a hidden field so I could see the value.

How do I get the deal is from each @foreach loop sent back to the component? Because of the @foreach loop I have multiple forms on the page, but the "Add Task" button needs to add the task via the correct deal id.

For reference:

Foreach section in my component view:

@foreach($this->contacts['deals'] as $deal)
<div class="col-md-6">
        <div class="row">
            <div class="col-md-9"><h3><a href="/deals/{{$deal['id']}}">{{$deal['dealtype']}}</a></h3></div>
            <h1>DealID: {{ $deal['id'] }}</h1>
            <div class="col-md-3">
                <a href="link_to_action('DealsController@destroy', $title, $parameters = array(), $attributes = array());">Delete</a>
            </div>
        </div>
        <div class="tasks">
            <h5>Tasks</h5>
            <div class="card-block">
            <div class="form-row">
                <div class="input-group form-group col-md-9">
                    <input type="text" name="tasktext" class="form-control" id="tasktext" placeholder="New Task" wire:model="tasktext">
                </div>
                <div>
                    <input type="text" value="{{ $deal['id'] }}" wire:model="deal_id">
                </div>
                <div class="form-group col-md-3" id="datepickerfield">
                    <div class="input-group date taskduedatepicker">
                    <input type="text" name="taskduedate" class="form-control" id="taskduedate" placeholder="Due Date" data-provide="datepicker" data-date-autoclose="true" data-date-today-highlight="true" autocomplete="off">
                    </div>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-12">
                    <input type="hidden" name="deal_id" id="deal_id" value="{{ $deal['id'] }}" wire:model="dealid">
                    <button class="btn btn-primary" wire:click="addTask" type="submit">Add</button>
                </div>
            </div>
            </div>
            <div>
                <ul class="list-group">
                    @foreach($deal['tasks'] as $task)
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <div>
                            <input type="checkbox" class="mr-4">
                            {{Carbon\Carbon::parse($task['taskduedate'])->format('m/d/Y')}} - {{$task['tasktext']}}
                        </div>
                        <div>
                            <form class=".mb-0" action="#" method="POST">
                                @csrf
                                <button class="btn btn-sm btn-danger">&times;</button>
                            </form>
                        </div>
                    </li>
                    @endforeach
                </ul>
            </div>
        </div>
</div>
@endforeach

And my controller:

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Task;

class Contactshow extends Component
{

    public $contacts;
    public $tasktext;
    public $deal_id;
    public $taskduedate;

    public function mount($contacts)
    {
        $this->contacts = $contacts;
    }

    public function render()
    {
        return view('livewire.contactshow');
    }

    public function addTask()
    {
        dd($this->deal_id);
        Task::create([
            'deal_id' => $this->deal_id,
            'tasktext' => $this->tasktext,
            'taskduedate' => $this->taskduedate,
        ]);
    }
}
0 likes
15 replies
mstrauss's avatar

@wallyj

In the hidden field, it appears you are using the incorrect variable name:

<input type="hidden" name="deal_id" id="deal_id" value="{{ $deal['id'] }}" wire:model="dealid">

Try changing it to:

<input type="hidden" name="deal_id" id="deal_id" value="{{ $deal['id'] }}" wire:model="deal_id">
WallyJ's avatar

No. I see how that could be confusing. I have a hidden field with wire:model set to "dealid", and a regular text field a few lines above that with the wire:model set to "deal_id", so in testing I could call either, and use the standard text input to actually see the value I am expecting in the hidden field. Once it worked in the standard text input, I could simply switch it to hidden.

mstrauss's avatar

@wallyj

Oh, sorry about that. I see what you're saying. Perhaps it has something to do with the snake_case? In the examples I have seen, and it my own Livewire test apps, I have always used camelCase

WallyJ's avatar

Changed

wire:model="deal_id"

to

wire:model="dealId"

No change. same result Value does not show in text input field. (Also edited the public variable to match, again, no change)

mstrauss's avatar

@wallyj

Did you also change the property on your class?

public $deal_id;

to

public $dealId;
WallyJ's avatar

Yes. That's what I meant when I said I edited the public variable to match. I guess I should have said public property. :)

mstrauss's avatar

Sorry, I missed that line in your original reply.

Did you include the below@livewireAssets in the head of your base layout template?

<head>
 // other stuff... 


    @livewireAssets
</head>
WallyJ's avatar

Yes. It is included in the tag. I can get the dd($tasktext) to give me a value of the text I enter, but not the pre-valued dealId.

WallyJ's avatar

I marked this as answered, but I was incorrect. I had the old variable in the controller, and the value showed up.

As soon as I added the correct variable:

public $deal_id;

The value no longer shows in the field.

Though, If I "inspect" the HTML in Chrome, I see this line:

<input type="text" value="11" wire:model="deal_id">

So it shows the value in the input field. Why can't I see it on the page and why can't it be seen by my Livewire component?

Mick79's avatar

I am having this same problem today. If I remove wire:model then the value attribute is populated correctly. If I add wire:model the value attribute is empty. It's breaking my heart.

2 likes
eugenefvdm's avatar

@Mick79 Yes my heart is breaking too. One would think something as binding to a hidden field in Livewire is easy to understand and well documented, but now I am crying.

Snapey's avatar

@eugenevdm its not a problem. Never set the value on the html element. Set it in the component and livewire will sync it into the form field.

1 like
hakim_r's avatar

As of November 2020,

When wire:model is used, it overwrite attribute "value" in html template.

Meaning that the value inside Livewire Component (prioritize) over value in html template.

2 likes

Please or to participate in this conversation.