F
Filament•2mo ago
Sayy

how to get data from input with custom page

i want get my data from input like this, with wire:model 
<x-table.td>
                                    <input
                                        class="w-15 text-xs h-8 dark:bg-zinc-800 dark:text-white rounded-md border shadow-sm border-zinc-200 dark:border-zinc-700"
                                        type="number"
                                        value="{{ $orderDetail->harga_awal }}"
                                        name="harga_awals"
                                        wire:model="harga_awals"
                                    />
                                </x-table.td>
<x-table.td>
                                    <input
                                        class="w-15 text-xs h-8 dark:bg-zinc-800 dark:text-white rounded-md border shadow-sm border-zinc-200 dark:border-zinc-700"
                                        type="number"
                                        value="{{ $orderDetail->harga_awal }}"
                                        name="harga_awals"
                                        wire:model="harga_awals"
                                    />
                                </x-table.td>
and then i got error like this 
Typed property App\Filament\Resources\TransaksiPembelianResource\Pages\CreateTransactionPembelian::$harga_awals must not be accessed before initialization
Typed property App\Filament\Resources\TransaksiPembelianResource\Pages\CreateTransactionPembelian::$harga_awals must not be accessed before initialization
my resource like this already to iniatialization 
class CreateTransactionPembelian extends Page implements HasForms
{
    use InteractsWithForms;

    protected static string $resource = TransaksiPembelianResource::class;

    protected static string $view = 'filament.resources.transaksi-pembelian-resource.pages.create-transaction-pembelian';

    public TransaksiPembelian $record;
    public mixed $selectedProduct;
    public int $quantityValue = 1;
    public int $discount = 0;
    public int $harga_awals;

    public function getTitle(): string
    {
        return "Kode Transaksi: {$this->record->transaksi_number}";
    }

    public function updateQuantity(TransaksiPembelianDetail $transaksiDetail, $quantity): void
    {
        if ($quantity > 0) {
            $transaksiDetail->update([
                'quantity' => $quantity,
                'harga_awal' => $this->harga_awals,
                //'discount' => $this->discount,
                'harga_akhir' => $transaksiDetail->harga_awal * $quantity,
            ]);
        }
    }
class CreateTransactionPembelian extends Page implements HasForms
{
    use InteractsWithForms;

    protected static string $resource = TransaksiPembelianResource::class;

    protected static string $view = 'filament.resources.transaksi-pembelian-resource.pages.create-transaction-pembelian';

    public TransaksiPembelian $record;
    public mixed $selectedProduct;
    public int $quantityValue = 1;
    public int $discount = 0;
    public int $harga_awals;

    public function getTitle(): string
    {
        return "Kode Transaksi: {$this->record->transaksi_number}";
    }

    public function updateQuantity(TransaksiPembelianDetail $transaksiDetail, $quantity): void
    {
        if ($quantity > 0) {
            $transaksiDetail->update([
                'quantity' => $quantity,
                'harga_awal' => $this->harga_awals,
                //'discount' => $this->discount,
                'harga_akhir' => $transaksiDetail->harga_awal * $quantity,
            ]);
        }
    }
i just want to get data harga_awal and then calculate with harga_akhir then data will be show to custom page input
Solution:
``` <input class="w-15 text-xs h-8 dark:bg-zinc-800 dark:text-white rounded-md border shadow-sm border-zinc-200 dark:border-zinc-700" type="number" value="{{ $orderDetail->quantity }}" wire:change="updateQuantity({{ $orderDetail->id }}, $event.target.value)"...
Jump to solution
56 Replies
Sayy
Sayy•2mo ago
{{-- Harga Awal --}}
                                <x-table.td>
                                    <input
                                        class="w-15 text-xs h-8 dark:bg-zinc-800 dark:text-white rounded-md border shadow-sm border-zinc-200 dark:border-zinc-700"
                                        type="number"
                                        value="{{ $orderDetail->harga_awal }}"
                                        name="harga_awals"
                                        wire:model="harga_awals"
                                    />
                                </x-table.td>
                                {{-- Diskon --}}
                                <x-table.td>
                                    <input
                                        class="w-15 text-xs h-8 dark:bg-zinc-800 dark:text-white rounded-md border shadow-sm border-zinc-200 dark:border-zinc-700"
                                        type="number"
                                        value="{{ $orderDetail->discount }}"
                                        name="discount"
                                        wire:model="discount"
                                    />
                                </x-table.td>
                                {{-- Harga Akhir --}}
                                <x-table.td>
                                    <input
                                        class="w-15 text-xs h-8 dark:bg-zinc-800 dark:text-white rounded-md border shadow-sm border-zinc-200 dark:border-zinc-700"
                                        type="number"
                                         value="{{ $orderDetail->harga_akhir }}"

                                    />
                                </x-table.td>
{{-- Harga Awal --}}
                                <x-table.td>
                                    <input
                                        class="w-15 text-xs h-8 dark:bg-zinc-800 dark:text-white rounded-md border shadow-sm border-zinc-200 dark:border-zinc-700"
                                        type="number"
                                        value="{{ $orderDetail->harga_awal }}"
                                        name="harga_awals"
                                        wire:model="harga_awals"
                                    />
                                </x-table.td>
                                {{-- Diskon --}}
                                <x-table.td>
                                    <input
                                        class="w-15 text-xs h-8 dark:bg-zinc-800 dark:text-white rounded-md border shadow-sm border-zinc-200 dark:border-zinc-700"
                                        type="number"
                                        value="{{ $orderDetail->discount }}"
                                        name="discount"
                                        wire:model="discount"
                                    />
                                </x-table.td>
                                {{-- Harga Akhir --}}
                                <x-table.td>
                                    <input
                                        class="w-15 text-xs h-8 dark:bg-zinc-800 dark:text-white rounded-md border shadow-sm border-zinc-200 dark:border-zinc-700"
                                        type="number"
                                         value="{{ $orderDetail->harga_akhir }}"

                                    />
                                </x-table.td>
view my custom page any ideas how to get data ?
Dennis Koch
Dennis Koch•2mo ago
You didn’t set any data for harga_awals. That’s what the error message tells you. You should do this on mount()
Sayy
Sayy•2mo ago
public function mount(){
        //Set Harga
        $this->harga_awals = 0;
    }
public function mount(){
        //Set Harga
        $this->harga_awals = 0;
    }
already set my data like this but why after i change data from input not update database ? 
public function updateQuantity(TransaksiPembelianDetail $transaksiDetail, $quantity): void
    {
        if ($quantity > 0) {
            $transaksiDetail->update([
                'quantity' => $quantity,
                'harga_awal' => $this->harga_awals,
                ////'discount' => $this->discount,
                //'harga_akhir' => $transaksiDetail->harga_awal * $quantity,
            ]);
        }
    }
public function updateQuantity(TransaksiPembelianDetail $transaksiDetail, $quantity): void
    {
        if ($quantity > 0) {
            $transaksiDetail->update([
                'quantity' => $quantity,
                'harga_awal' => $this->harga_awals,
                ////'discount' => $this->discount,
                //'harga_akhir' => $transaksiDetail->harga_awal * $quantity,
            ]);
        }
    }
Sayy
Sayy•2mo ago
already set my input and then not update
No description
No description
Dennis Koch
Dennis Koch•2mo ago
- Is harga_awal fillable? - Did you verify whether updateQuantity() is called? - Did you verify the data that is sent?
Sayy
Sayy•2mo ago
data harga_awal is fillable, then updateQuantity get data from quantity 
{{-- Quantity --}}
                                <x-table.td>
                                    <input
                                        class="w-15 text-xs h-8 dark:bg-zinc-800 dark:text-white rounded-md border shadow-sm border-zinc-200 dark:border-zinc-700"
                                        type="number"
                                        value="{{ $orderDetail->quantity }}"
                                        wire:change="updateQuantity({{ $orderDetail->id }}, $event.target.value)"
                                        min="1"
                                        max="{{ $orderDetail->product->stock_quantity }}"
                                    />
                                </x-table.td>
{{-- Quantity --}}
                                <x-table.td>
                                    <input
                                        class="w-15 text-xs h-8 dark:bg-zinc-800 dark:text-white rounded-md border shadow-sm border-zinc-200 dark:border-zinc-700"
                                        type="number"
                                        value="{{ $orderDetail->quantity }}"
                                        wire:change="updateQuantity({{ $orderDetail->id }}, $event.target.value)"
                                        min="1"
                                        max="{{ $orderDetail->product->stock_quantity }}"
                                    />
                                </x-table.td>
or just create function for harga_awal to get value ? like this 
{{-- Harga Awal --}}
<x-table.td>
   <input class="w-15 text-xs h-8 dark:bg-zinc-800 dark:text-white rounded-md border shadow-sm border-zinc-200 dark:border-zinc-700"
          type="number"
          value="{{ $orderDetail->harga_awal }}"
          wire:change="updateHargaAwal({{ $orderDetail->id }}, $event.target.value)" />
</x-table.td>
{{-- Harga Awal --}}
<x-table.td>
   <input class="w-15 text-xs h-8 dark:bg-zinc-800 dark:text-white rounded-md border shadow-sm border-zinc-200 dark:border-zinc-700"
          type="number"
          value="{{ $orderDetail->harga_awal }}"
          wire:change="updateHargaAwal({{ $orderDetail->id }}, $event.target.value)" />
</x-table.td>
my function for updateHargaAwal 
 public function updateHargaAwal(TransaksiPembelianDetail $transaksiDetail, $quantity): void
    {
        if ($quantity > 0) {
            $transaksiDetail->update([
                'harga_awal' => $quantity,
                'harga_akhir' => $transaksiDetail->quantity * $quantity,
            ]);
        }
    }
 public function updateHargaAwal(TransaksiPembelianDetail $transaksiDetail, $quantity): void
    {
        if ($quantity > 0) {
            $transaksiDetail->update([
                'harga_awal' => $quantity,
                'harga_akhir' => $transaksiDetail->quantity * $quantity,
            ]);
        }
    }
Dennis Koch
Dennis Koch•2mo ago
It would help to read the view code, if you trim the space in front.
updateQuantity get data from quantity
Did you verify that it is called? The quantity is updated?
updateHargaAwal
Is this even called? You called it harga_awalS with an s in the end
Sayy
Sayy•2mo ago
my quantity already updated but my harga_awals not update if im using wire:model wait i will change
Dennis Koch
Dennis Koch•2mo ago
wire:change="updateHargaAwal({{ $orderDetail->id }}, $event.target.value)" />
This feels a bit hacky. Livewire already sync to your properties through wire:model. You shouldn't need to pass the value again.
Dennis Koch
Dennis Koch•2mo ago
Do wire:model.blur="harga_awal" and use Livewires lifecycle hook updatedHargaAwal (https://livewire.laravel.com/docs/lifecycle-hooks#update`)
Laravel
Lifecycle Hooks | Laravel
A full-stack framework for Laravel that takes the pain out of building dynamic UIs.
Sayy
Sayy•2mo ago
but my data not insert to database if im using wire:model
Dennis Koch
Dennis Koch•2mo ago
wire:model doesn't write to your DB. It binds it to Livewire. You need to debug from there But I can't help you, if you can't to some basic debugging
Sayy
Sayy•2mo ago
and how to insert, if im using this ? 
public function updateQuantity(TransaksiPembelianDetail $transaksiDetail, $quantity): void
    {
        if ($quantity > 0) {
            $transaksiDetail->update([
                'quantity' => $quantity,
                'harga_awal' => $this->harga_awal, //how to insert to database 
            ]);
        }
    }
public function updateQuantity(TransaksiPembelianDetail $transaksiDetail, $quantity): void
    {
        if ($quantity > 0) {
            $transaksiDetail->update([
                'quantity' => $quantity,
                'harga_awal' => $this->harga_awal, //how to insert to database 
            ]);
        }
    }
Dennis Koch
Dennis Koch•2mo ago
$transaksiDetail should be a property on the Page (or is this a table, then you still need the wire:change) Then you can do: 
public function updatedHargaAwal() {
  $this->transaksiDetail->update([
    'harga_awal' => $this->harga_awal
  ]);
}
public function updatedHargaAwal() {
  $this->transaksiDetail->update([
    'harga_awal' => $this->harga_awal
  ]);
}
This is all unrelated to Filament. It's pure Livewire at this point
Sayy
Sayy•2mo ago
and how to get my quantity value ? if im using before like this 
{-- Quantity --}}
<x-table.td>
   <input class="w-15 text-xs h-8 dark:bg-zinc-800 dark:text-white rounded-md border shadow-sm border-zinc-200 dark:border-zinc-700"
          type="number"
          value="{{ $orderDetail->quantity }}"
          wire:change="updateQuantity({{ $orderDetail->id }}, $event.target.value)"
          min="1"
          max="{{ $orderDetail->product->stock_quantity }}" />
</x-table.td>
{-- Quantity --}}
<x-table.td>
   <input class="w-15 text-xs h-8 dark:bg-zinc-800 dark:text-white rounded-md border shadow-sm border-zinc-200 dark:border-zinc-700"
          type="number"
          value="{{ $orderDetail->quantity }}"
          wire:change="updateQuantity({{ $orderDetail->id }}, $event.target.value)"
          min="1"
          max="{{ $orderDetail->product->stock_quantity }}" />
</x-table.td>
Dennis Koch
Dennis Koch•2mo ago
Are you even changing harga_awals or do you just submit the default value? value="{{ $orderDetail->harga_awal }}" I don't think that will trigger an update. Otherwise I guess your initial example should work
Sayy
Sayy•2mo ago
just submit from im input, i think no need to set value ?
Dennis Koch
Dennis Koch•2mo ago
I don't understand. Did you manually change the harga_awals input? So you entered a new value
Sayy
Sayy•2mo ago
i just input my data harga_awal then insert to database but why im using this not inserted to database ?
Dennis Koch
Dennis Koch•2mo ago
I don't understand Can you share a video of inputting the data and the data that you get just before calling update?
Sayy
Sayy•2mo ago
this my code resource 
class CreateTransactionPembelian extends Page implements HasForms
{
    use InteractsWithForms;

    protected static string $resource = TransaksiPembelianResource::class;

    protected static string $view = 'filament.resources.transaksi-pembelian-resource.pages.create-transaction-pembelian';

    public TransaksiPembelian $record;
    public TransaksiPembelianDetail $recordDetail;
    public mixed $selectedProduct;
    public int $quantityValue = 1;
    public int $discount = 0;
    public int $harga_awal;
    public int $stockDetail;

    public function mount()
    {
        //Set Harga
        $this->harga_awal = 0;
        $this->quantityValue = 0;
    }

    public function getTitle(): string
    {
        return "Kode Transaksi: {$this->record->transaksi_number}";
    }

    //Update Quantity for product
    public function updateQuantity()
    {
        $this->recordDetail->update([
            'quantity' => $this->quantityValue,
            'harga_awal' => $this->harga_awal,
            //'discount' => ($this->harga_awal * $this->discount / 100) ,
            //'harga_akhir' => $transaksiDetail->harga_awal * $quantity,
        ]);
    }

    public function updateHargaAwal()
    {
        $this->recordDetail->update([
            'harga_awal' => $this->harga_awal,
            'harga_akhir' => $this->recordDetail->quantity * $this->recordDetail->harga_awal,
        ]);
    }
}
class CreateTransactionPembelian extends Page implements HasForms
{
    use InteractsWithForms;

    protected static string $resource = TransaksiPembelianResource::class;

    protected static string $view = 'filament.resources.transaksi-pembelian-resource.pages.create-transaction-pembelian';

    public TransaksiPembelian $record;
    public TransaksiPembelianDetail $recordDetail;
    public mixed $selectedProduct;
    public int $quantityValue = 1;
    public int $discount = 0;
    public int $harga_awal;
    public int $stockDetail;

    public function mount()
    {
        //Set Harga
        $this->harga_awal = 0;
        $this->quantityValue = 0;
    }

    public function getTitle(): string
    {
        return "Kode Transaksi: {$this->record->transaksi_number}";
    }

    //Update Quantity for product
    public function updateQuantity()
    {
        $this->recordDetail->update([
            'quantity' => $this->quantityValue,
            'harga_awal' => $this->harga_awal,
            //'discount' => ($this->harga_awal * $this->discount / 100) ,
            //'harga_akhir' => $transaksiDetail->harga_awal * $quantity,
        ]);
    }

    public function updateHargaAwal()
    {
        $this->recordDetail->update([
            'harga_awal' => $this->harga_awal,
            'harga_akhir' => $this->recordDetail->quantity * $this->recordDetail->harga_awal,
        ]);
    }
}
Sayy
Sayy•2mo ago
and this my blade code
No description
Sayy
Sayy•2mo ago
i want to take value from blade with wire:model then im update to database. my question updateQuantity() im using your code because not save if using wire:change my input not update to database
Dennis Koch
Dennis Koch•2mo ago
Please share a short video as per my last message
Sayy
Sayy•2mo ago
Sayy
Sayy•2mo ago
just want update my quantity, then im calculate if database insert. just no need to look my value from blade
Dennis Koch
Dennis Koch•2mo ago
You missed that part:
Can you share a video of inputting the data and the data that you get just before calling update?
Btw. when is $recordDetail set? I can't see in anywhere
Sayy
Sayy•2mo ago
from public TransaksiPembelianDetail $recordDetail
Dennis Koch
Dennis Koch•2mo ago
That's just an empty property? Where is it set? And again: Did you debug (e.g. with a simple dd()) that your update methods are actually called and checked the data? I can't help you if you don't debug the actual code and just show UI and Database
Sayy
Sayy•2mo ago
where im input debug ?
Dennis Koch
Dennis Koch•2mo ago
I don't know about your experience, but you should learn how to Debug in PHP and Laravel. This is essential so people can actually help you
Sayy
Sayy•2mo ago
inputting the data
Dennis Koch
Dennis Koch•2mo ago
What does this ouput? 
public function updateHargaAwal()
{
  dd($this->recordDetail, $this->harga_awal);
}
public function updateHargaAwal()
{
  dd($this->recordDetail, $this->harga_awal);
}
As I said: You just show me UI and Database. This doesn't take us any further as we need to check on your code. Also: You removed the wire:change="" now? So that method get's never called?
Sayy
Sayy•2mo ago
yes if im using wire change like this, wait i will show you and record
Dennis Koch
Dennis Koch•2mo ago
For the Livewire hook to trigger immediately you need wire:model.blur
Sayy
Sayy•2mo ago
this function will insert to database if submit ? i mean this
Dennis Koch
Dennis Koch•2mo ago
No. It should dump the current data when the fuction is called? Nothing happens? Then the method is never called Step 1 for debugging: Check if your code actually runs!
Sayy
Sayy•2mo ago
Sayy
Sayy•2mo ago
this function means 
public function updatedHargaAwal() {
  $this->transaksiDetail->update([
    'harga_awal' => $this->harga_awal
  ]);
}
public function updatedHargaAwal() {
  $this->transaksiDetail->update([
    'harga_awal' => $this->harga_awal
  ]);
}
if im using wire change will be update if im change my input
Dennis Koch
Dennis Koch•2mo ago
Please add that code do updateQuantity()
Sayy
Sayy•2mo ago
//Update Quantity for product
    public function updateQuantity(TransaksiPembelianDetail $record, $quantity): void
    {
        if($quantity > 0){
            $record->update([
                'quantity' => $quantity,
            ]);
        }
    }
//Update Quantity for product
    public function updateQuantity(TransaksiPembelianDetail $record, $quantity): void
    {
        if($quantity > 0){
            $record->update([
                'quantity' => $quantity,
            ]);
        }
    }
Dennis Koch
Dennis Koch•2mo ago
I currently don't care about you Database. Add the dd() code in there
Sayy
Sayy•2mo ago
what you want to screenshot?
Dennis Koch
Dennis Koch•2mo ago
Wait. updateQuantity() does work right?
Sayy
Sayy•2mo ago
yes because im using wire:change
Solution
Sayy
Sayy•2mo ago
 <input class="w-15 text-xs h-8 dark:bg-zinc-800 dark:text-white rounded-md border shadow-sm border-zinc-200 dark:border-zinc-700"
        type="number"
        value="{{ $orderDetail->quantity }}"
        wire:change="updateQuantity({{ $orderDetail->id }}, $event.target.value)"
        min="1"
        max="{{ $orderDetail->product->stock_quantity }}" />
 <input class="w-15 text-xs h-8 dark:bg-zinc-800 dark:text-white rounded-md border shadow-sm border-zinc-200 dark:border-zinc-700"
        type="number"
        value="{{ $orderDetail->quantity }}"
        wire:change="updateQuantity({{ $orderDetail->id }}, $event.target.value)"
        min="1"
        max="{{ $orderDetail->product->stock_quantity }}" />
Dennis Koch
Dennis Koch•2mo ago
Can you do wire:model.blur="harga_awal" for harga awal input and use updatedHargaAwal() and see if this method is run (with dd)?
Sayy
Sayy•2mo ago
not run with dd if im using like this 
<input
                                        class="w-15 text-xs h-8 dark:bg-zinc-800 dark:text-white rounded-md border shadow-sm border-zinc-200 dark:border-zinc-700"
                                        type="number"
                                        wire:model.blur="harga_awal"
                                    />
<input
                                        class="w-15 text-xs h-8 dark:bg-zinc-800 dark:text-white rounded-md border shadow-sm border-zinc-200 dark:border-zinc-700"
                                        type="number"
                                        wire:model.blur="harga_awal"
                                    />
Dennis Koch
Dennis Koch•2mo ago
Can you try renaming it to hargaAwal?
Sayy
Sayy•2mo ago
i think posible to create new function right ? like one by one harga_awal same with quantity ?
Sayy
Sayy•2mo ago
from debugbar but how to take this value then update ?
No description
Dennis Koch
Dennis Koch•2mo ago
And updatedHargaAwal() is still not triggered?
Sayy
Sayy•2mo ago
not triggered 
public function updateHargaAwal()
    {
        $this->recordDetail->update([
            'harga_awal' => $this->hargaAwal,
        ]);
    }
public function updateHargaAwal()
    {
        $this->recordDetail->update([
            'harga_awal' => $this->hargaAwal,
        ]);
    }
if im duplicate this function then im change for updateHargaAwal, and my blade same with updateQuantity its work
Dennis Koch
Dennis Koch•2mo ago
Dude, it's still updatedHargaAwal(). din the end So everything works with that solution? I thought that one wasn't working in the beginning?
Sayy
Sayy•2mo ago
its same im change with hargaAwal() not trigger you say this in the beginning ? (im so sorry sir if you say that), its work but i just want to simple like updateQuantity with harga will change together like that but if cant i think just change one by one
Sayy
Sayy•2mo ago
@Dennis Koch thanks for help me, sorry make you confuse to understand
Want results from more Discord servers?
Add your server
More Posts
Problem in a stat overview in resource listHow can I have a stat overview widget in my resource list, that follows the query of table filters, How to Display Data in Database to a Repeater - Custom Filament PageHello, I'm new in filament and I'm trying to build a custom page using form builder and repeater, buSearchable for models/relationships with different database connectionsI have a model with a connection to another database, when it appears in the list table it doesn't hformatStateUsing on simple repeater componentIs there a reasonable way to apply `formatStateUsing` to the component in a simple repeater, withoutHow to "inject" custom javascript when clicking on a wizard stepHi folks, filament newbie here 😄 I load a google map in one of my form wizard steps. When I go toAction causes error: TypeError: Cannot convert undefined or null to objectI have an action button which is only visible when a certain filter is enabled: ```php Tables\No data displayedMy default admin panel is working great. Resources are displayed just as you'd expect. The problemUnable to find component : [notifications]Hello everyone, I have a problem with Filament 3. To begin with, I have only installed the "NotificDid you install wepinsert component from wireElements in filament ?The component "work" but it's not display.Re-render FileUpload ComponentI have a scenario where I have a select component with a few options, when a user selects an option