this is my blade view example
<x-jet-form-section submit="store">
<div class="col-span-6 sm:col-span-4">
<x-jet-label for="name" value="{{ __('Name') }}" />
<x-jet-input name="name" wire:model.defer="name" type="text" class="mt-1 block w-full" autocomplete="off" />
<x-jet-input-error for="name" class="mt-2" />
</div>
</x-jet-form-section>
on LiveWire Component I have this debug
public function store() {
dd($this);
}
when i submit the form I see the input field value.
Then i close the debug windod (dd) press submit again and now the value is NULL.
If I change wire:model.defer to wire:model.lazy this not happend again. it works.
why ?!
Related
I'm struggling to understand how livewire works.
I have two text fields. One is where the user enters information like prefixes and the second field with a read-only attribute where data will be displayed based on the first field value.
But for some reason, I can't populate the second field. All examples on the internet are how to take a value and return it back or generate a dropdown menu.
my blade template:
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">prefix</label>
<input wire:change="testing"
type="text"
class="form-control"
id="prefix"
name="prefix"
/>
</div>
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">Code</label>
<input wire:model="part"
type="text"
class="form-control"
id="part"
name="part"
value="{{ $part }}"
/>
</div>
and
Livewire class:
class DoSomethingClass extends Component
{
public $prefix;
public $part;
public function testing()
{
$this->part = $this->prefix;
}
public function render()
{
return view('livewire.blade-template');
}
}
You should use wire:model to both input fields. Than, if you want to update the 2nd field on the input of the first, you can use the Livewire Lifecycle to update it.
public $prefix;
public $part;
public function updatedPrefix()
{
$this->part = $this->prefix;
}
Check this link for info on the updatedPrefix() hook: https://laravel-livewire.com/docs/2.x/lifecycle-hooks
(You can choose to use your testing() method too, but than you still need to use the wire:model directive to your second input.)
You can make what you're doing work just by adding wire:model="prefix" to your first input as suggested above.
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">prefix</label>
<input wire:change="testing"
type="text"
class="form-control"
id="prefix"
name="prefix"
wire:model="prefix"
/>
</div>
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">Code</label>
<input wire:model="part"
type="text"
class="form-control"
id="part"
name="part"
value="{{ $part }}"
/>
</div>
And the component itself can just stay the same. When someone types anything in the first field then tabs or clicks away it will update the second field.
If you want the second field to update as the user types change it to wire:keydown="testing", it will make a call with every keystroke.
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">prefix</label>
<input wire:keydown="testing"
type="text"
class="form-control"
id="prefix"
name="prefix"
wire:model="prefix"
/>
</div>
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">Code</label>
<input wire:model="part"
type="text"
class="form-control"
id="part"
name="part"
value="{{ $part }}"
/>
</div>
As mentioned above, if you use the updatedPrefix() method you won't need the wire:change or wire:keydown as Livewire will update the field as the user types.
I am currently stuck on a problem.
I have once an IndexUserSettings.vue this shows then the IndexUserBillingDetail.vue. In this vue it is checked if create: boolean == false or true. If true the CreateUserBillingDetail.vue is shown, if false ListUserBillingDetail.vue is shown.
Now the problem is as follows:
I have in the CreateUserBillingDetail.vue a form.
<template>
<form #submit.prevent="submit" class="grid grid-cols-1">
<label for="name">Name: </label>
<input class="p-2 border" id="name" v-model="form.name" />
<label for="email">Email: </label>
<input class="p-2 border" id="email" v-model="form.email" />
<label for="street">Steet: </label>
<input class="p-2 border" id="street" v-model="form.street" />
<label for="street_addition">street Addition: </label>
<input class="p-2 border" id="street_addition" v-model="form.street_addition" />
<label for="postal_code">Postal Code: </label>
<input class="p-2 border" id="postal_code" v-model="form.postal_code" />
<label for="city">City: </label>
<input class="p-2 border" id="city" v-model="form.city" />
<label for="country">Country: </label>
<input class="p-2 border" id="country" v-model="form.country" />
<label for="vat_id">Vat ID: </label>
<input class="p-2 border" id="vat_id" v-model="form.vat_id" />
<button type="submit">Submit</button>
</form>
</template>
<script>
import {Inertia} from "#inertiajs/inertia";
export default {
name: "CreateUserBillingDetail",
props: {
errors: Object
},
data() {
return {
form: this.$inertia.form({
name: null,
email: null,
street: null,
street_addition: null,
postal_code: null,
city: null,
country: null,
vat_id: null
})
}
},
methods: {
submit() {
this.form.post(route('billingdetail.store'));
}
}
}
</script>
Now when I put <div v-if="errors.name">{{ errors.name }}</div> under each input the page no longer works.
Why does this happen?
I don't know how to do this. I want a user settings page to exist there the user can then set everything possible at the end. (Just see and create his billing details).
Do I have to write everything in the UserSettingsController? Currently I have both UserSettingsController + UserBillingDetailController but UserBillingDetailController is a completely different route /billingdetail and wants to have user Settings
It's because error Object is empty. To get validation errors of name field you can also use form.errors.name.
In contoller do validation as usual.
This question already has answers here:
Laravel 5.4 field doesn't have a default value
(10 answers)
Closed last year.
I've decided to not use image in my create menu page but then I got this error "SQLSTATE[HY000]: General error: 1364 Field 'image' doesn't have a default value".
This is the MenuController:
public function store(Request $request, Menu $menu)
{
$data = array();
$data['name'] = $request->name;
$data['slug'] = $request->slug;
$data['price'] = $request->price;
$data['status'] = $request->status;
$menu = DB::table('menus')->insert($data);
return redirect()->route('admin.menu.index');
}
and the add.blade.php:
<form action="{{ route('admin.menu.store') }}" method="POST" enctype="multipart/form-data">
#csrf
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="name" id="name" required value="{{ old('name') }}">
</div>
</div>
<div class="form-group row">
<label for="staticprice" class="col-sm-2 col-form-label">Price</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="price" id="price" required value="{{ old('price') }}">
</div>
</div>
<div class="form-group row">
<label for="staticprice" class="col-sm-2 col-form-label">Status</label>
<div class="col-sm-10">
<input type="radio" name="status" value="1" /> Active
<input type="radio" name="status" value="0" /> Not Active
</div>
</div>
<input id="slug" name="slug" type="hidden" value="Menu-{{ rand(100,999)}}" />
<button type="submit" class="btn btn-secondary" style="margin-top: 20px; width: 100%">Submit</button>
</form>
I don't know where did I do wrong.
Actually this erorr arise because in your table named menus, the column named image is not set to NULL by default.
Either you have to add some value (can be empty) in it or you have to update its structure and set NULL as by default value.
See the below image to help.
As suggested above, setting "Default" to NULL will clear the error.
You can specify this when setting your migration table by
$table->string('image')->nullable();
I´m traying to create form to create event.
i have one resourceRoute in my laravel 7. But when i send my form, return this message:
The POST method is not supported for this route
but how i said i have a resource route, and i call to method create.
My routes
Route::resource('calendario', 'CalendarioController');
My form:
div class="col-xs-12 p-5">
<form action="{{ Request::is('calendario/*/edit') ? route('calendario.update', $event->id) : route('calendario.create') }}" method="post">
#csrf
#if(Route::currentRouteName() == 'calendario.edit')
#method('PUT')
#endif
<div class="form-group">
<label for="nombre">Nombre</label>
<input type="text" class="form-control" name="nombre" id="nombre" value="{{ isset($event) ? $event->nombre : old('nombre') }}" aria-describedby="emailHelp" placeholder="Nombre del cliente">
</div>
<div class="form-group">
<label for="fecha-inicio">Fecha Inicio</label>
<input type="text" value="{{ isset($event) ? $event->fecha_inicio : old('fecha_inicio') }}" class="form-control" name="fecha_inicio" id="fecha-inicio">
</div>
<div class="form-group">
<label for="fecha-inicio">Fecha Fin</label>
<input type="text" value="{{ isset($event) ? $event->fecha_fin : old('fecha_fin') }}" class="form-control" name="fecha_fin" id="fecha-fin">
</div>
<input type="submit" class="btn btn-info" value="{{ Request::is('calendario/*/edit') ? 'Guardar' : 'Crear Cita' }}">
</form>
</div>
</div>
</div>
thsi form it´s used also for edit event and in edit i can ok... I don´t understand that i´m doing wrong
Thanks you for help
This is 100% an issue with the Route::resource('calendario', 'CalendarioController')
The update method accepts put as I can remember.
As you can see here: put/patch
So you can change your form method to method="put" or your have to define your routes like this: Route::post('path/{id}', 'CalendarioController#update')
My edit interface edit.blade.php only gets the first word of the name from my database, this is what the index.blade.php looks like
and when i click on the edit icon of the 3rd line it leads me to edit.blade.php which gives me this
"Nom d'établissement" textfield only gets the first word from the database
Everything looks fine in the database:
this is my edit.blade.php form:
<form method="post" action="{{ route('etablissements.update', $etablissement->id) }}">
#method('PATCH')
#csrf
<div class="col-5">
<div class="form-group">
<label for="nom">Nom Etablissement :</label>
<input type="text" class="form-control" name="nom" value={{ $etablissement->nom }} />
</div>
<div class="form-group">
<label for="price">E-Mail :</label>
<input type="text" class="form-control" name="email" value={{ $etablissement->email }} />
</div>
<div class="form-group">
<label for="quantity">Telephone:</label>
<input type="text" class="form-control" name="telephone" value={{ $etablissement->telephone }} />
</div>
</div>
<button type="submit" class="btn btn-primary">Confirmer</button>
</form>
this is edit function in the controller:
public function edit($id)
{
$etablissement = Etablissement::find($id);
return view('etablissements.edit', compact('etablissement'));
}
and this is update function in the controller:
public function update(Request $request, $id)
{
$request->validate([
'nom'=>'required',
'email'=> 'required',
'telephone' => 'required|numeric'
]);
$etablissement = Etablissement::find($id);
$etablissement->nom = $request->get('nom');
$etablissement->email = $request->get('email');
$etablissement->telephone = $request->get('telephone');
$etablissement->save();
return redirect('/etablissements')->with('success', 'Utilisateur édité');
}
Quote the value attribute.
<input type="text" class="form-control" name="nom" value="{{ $etablissement->nom }}" />
Without quotes, the second word in$etablissement->nom is interpreted as another attribute rather than part of the value of the value attribute.
The email and telephone values are showing up correctly because there are no spaces, but you should quote those as well just in case.