sI have a livewire form with an address field that has google places autocomplete enabled on it. Every time I select an address from the autocomplete list and move to a new input in the form the address input gets reset to the value before clicking the address I wanted.
I added wire:ignore on my field and it still gets reset to the value typed in before the click event. This is my code for the input:
<div wire:ignore id="for-input-address" class="form-group col-lg-6{{ $errors->has('address') ? ' has-danger' : '' }}">
<label class="form-control-label" for="input-address">{{ __('Home address') }}</label>
<input wire:model="address" type="text" name="address" id="input-address" class="form-control form-control-alternative{{ $errors->has('address') ? ' is-invalid' : '' }}" placeholder="{{ __('Home address') }}" value="{{ old('address') }}" required autofocus>
#if ($errors->has('address'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('address') }}</strong>
</span>
#endif
</div>
So if I type 56 and select the address the moment I move to the next field the input gets reset to 56.
I want to say I have some select fields with wire:ignore that work just fine when livewire reloads the DOM.
Put an additional attribute to your input -> autocomplete="off" to tell the browser not to use any autocomplete mechanisms.
See: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
I ended up using livewire events, documented here: https://laravel-livewire.com/docs/2.x/events in my blade file and I fired an event on google autocomplete "place_changed" like so
google.maps.event.addListener(autocomplete, 'place_changed', function() {
Livewire.emit('addressUpdated', addressAndTown, postcode);
});
and in my controller I did the following before the submit function
public function addressUpdated($address, $postcode)
{
$this->address = $address;
$this->postcode = $postcode;
}
and updated my values in the controller
Related
i am using laravel query builder but the problem is i am using radio buttons but i want to update the attendance at the radio button but it returns an error Undefined variable $attendance_status
i don't know why please help and how can i pass the $attendance_status variable
here is my code
my form
<form action="{{route('Attendances.update',$student->id)}}" method="post">
#csrf
#method('PUT')
<input type="hidden" name="id" value="{{$student->id}}">
<label class="block text-gray-500 font-semibold sm:border-r sm:pr-4">
<input name="attendences"
{{ $student->attendances()->first()->attendence_status == 1 ? 'checked' : '' }}
class="leading-tight" type="radio" value="presence">
<span class="text-success">حضور</span>
</label>
<label class="ml-4 block text-gray-500 font-semibold">
<input name="attendences"
{{ $student->attendances()->first()->attendence_status == 0 ? 'checked' : '' }}
class="leading-tight" type="radio" value="absent">
<span class="text-danger">غياب</span>
</label>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-dismiss="modal">{{trans('Students_trans.Close')}}</button>
<button class="btn btn-danger">{{trans('Students_trans.submit')}}</button>
</div>
</form>
here is my controller
update
public function update(Request $request, $id)
{
// return $request;
if($request->attendances == 'absent'){
$attendance_status = 0;
}
else if($request->attendances == 'presence'){
$attendance_status = 1;
}
Attendance::find($id)->update([
'student_id'=> $id,
'grade_id'=> $request->grade_id,
'class_id'=> $request->classroom_id,
'section_id'=> $request->section_id,
'attendance_date'=> date('Y-m-d'),
'status' => $attendance_status,
]);
return back();
You have an if and an elseif in your Controller, so only 2 conditions would create a variable named $attendance_status. You probably want to add a default branch, else basically, to make sure that the variable gets created with some default value before you try to use it in your update call.
Not sure which one of those 2 options you want to be the default but this would simplify things:
$attendance_status = $request->attendences == 'presence';
https://laravel.com/docs/9.x/redirects#redirecting-with-flashed-session-data
You may use the withInput method provided by the RedirectResponse instance to flash the current request's input data to the session before redirecting the user to a new location. Once the input has been flashed to the session, you may easily retrieve it during the next request:
return back()->withInput();
Surely {{ $student->attendances()->first()->attendence_status == 0 ? 'checked' : '' }} logic does not work in this way.
try this instead
<input name="attendences" checked="{{ $student->attendances()->first()->attendence_status == 0 ? true : false}}" class="leading-tight" type="radio" value="absent">
How would I avoid doing calculation for 3 inputs using Livewire and use JS instead, but still can bind the inputs and their new values with the component.
Example:
<input id="cash-price"
type="text"
wire:model="total_cache_price"
class="amount-credit">
<input id="deposit"
type="text"
wire:model="deposit"
class="amount-credit">
<input id="trade-in"
type="text"
wire:model="trade_in"
class="amount-credit">
I can easily do a simple calculation using JS, but the properties in Livewire component would still be empty or null after submitting the form. I am trying to avoid livewire requests for every input change.
Note: I understand the deferred updating in livewire, the problem is with the property values not changing.
I will show you an example in alpine js + livewire way.
Here I want to set value in two inputs from a selected option in select.
Please note that x-ref is used in alpine to directly access DOM elements without using getElementById.
<div x-data="{
from_date : #entangle('from_date').defer,
to_date : #entangle('to_date').defer,
dateChange(){
select = this.$refs.years;
this.from_date = select.options[select.selectedIndex].getAttribute('data-from');
this.to_date = select.options[select.selectedIndex].getAttribute('data-to');
},
resetFilters(){
this.net_balances = false;
}}">
<select x-ref="years" #change="dateChange()">
<option value="">Year</option>
#foreach ($years as $key => $year)
<option wire:key="{{ 'years'.$key }}" data-from="{{ $year->from_date }}" data-to="{{ $year->to_date }}" value="{{ $year->id }}">{{ $year->name }} </option>
#endforeach
</select>
<div>
<text type="date" x-model="from_date" />
</div>
<div >
<text type="date" x-model="to_date" />
</div>
This page is loaded when the user clicks on the link received in email to reset the password.
This is a password reset form. It has two input fields - new password and confirm password. Both the input fields have icon-buttons to hide/unhide the input password string. When any of these icon buttons is clicked, the boolean variable hide reverses its value.
(click)="hide = !hide" type="button"
Both the input fields type is defined as: [type]="hide ? 'password' : 'text'"
When the form is loaded for the first time, without any input in the first password input field, both the icon-buttons respond to clicks.
Notice the text true or false next to icons. These are just for testing the value of the variable 'hide'.
Issues:
In the picture the password is entered in the first input with less than 8 characters, so it displays the error about length. But even after 8 characters are types the error does not go. Sometimes even the of the second input does not float up while entering the string in the second input.
After entering value in first input, when any of the the hide/unhide button icons is clicked only the first input responds to the clicks(or changes the input type). The value of 'hide' is changed to false in first input ONLY but not in second - WHY?
component.ts
hide = true;
// in ngOnInit
this.form = this.formBuilder.group({
password: ['', [Validators.required, Validators.minLength(8)]],
confirmPassword: ['', Validators.required],
}, {
validator: MustMatch('password', 'confirmPassword')
});
template:
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div>
<mat-form-field class="mt-1r">
<mat-label>New Password</mat-label>
<input matInput formControlName="password" [type]="hide ? 'password' : 'text'">
<button mat-icon-button matSuffix (click)="hide = !hide" type="button">
<mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon> {{hide}}
</button>
<mat-hint>Min 8 characters</mat-hint>
<mat-error *ngIf="form.get('password').errors.required">Password is required</mat-error>
<mat-error *ngIf="form.get('password').errors.minlength">Password must be at least 8 characters long</mat-error>
</mat-form-field>
</div>
<div>
<mat-form-field class="mt-1r">
<mat-label>Confirm Password</mat-label>
<input matInput formControlName="confirmPassword" [type]="hide ? 'password' : 'text'">
<button mat-icon-button matSuffix (click)="hide = !hide" type="button">
<mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon> {{hide}}
</button>
<mat-error *ngIf="form.get('confirmPassword').errors.required">Confirm Password is required</mat-error>
</mat-form-field>
</div>
<div class="mt-1r">
<button type="submit" mat-raised-button color="primary" class="mr-1r">Reset Password</button>
<button type="button" mat-raised-button color="warn" routerLink='/'>Cancel</button>
</div>
</form>
sorry if I don t get your problem right. I hope this cold help with mat-icon problem. Try this and let me know.
source:
https://material.angular.io/components/form-field/examples
<div class="example-container">
<mat-form-field appearance="fill">
<mat-label>Enter your password</mat-label>
<input matInput [type]="hide ? 'password' : 'text'">
<button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide">
<mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
</button>
</mat-form-field>
<mat-form-field appearance="fill" floatLabel="always">
<mat-label>Amount</mat-label>
<input matInput type="number" class="example-right-align" placeholder="0">
<span matPrefix>$ </span>
<span matSuffix>.00</span>
</mat-form-field>
</div>
I'm a bit new to laravel and I'm working on a laravel application which has a checkbox field which should have a boolean value of 1 when the user checks the checkbox, and 0 when the checkbox is unchecked.
I want to retrieve the boolean value as either 1 or 0 and save in a db.
Please assist?
View
<form method="POST" action="{{ route('b2c.getplans') }}" id="travel_form" accept-charset="UTF-8">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="check-now {{ $errors->has('spouse') ? ' has-error' : '' }}">
<h1 class="cover-travel">I am travelling with</h1>
<label class="spouse-me">
<h1 class="pumba">Spouse</h1>
<input id="spouse" type="checkbox" name="spouse">
<span class="checkmark" name="spouse"></span>
</label>
#if ($errors->has('spouse'))
<span class="help-block">
<strong>{{ $errors->first('spouse') }}</strong>
</span>
#endif
</div>
<button type="submit" class="form-b3c"> Get Plans</button>
</form>
Controller
public
function validatePlanEntries(Request $request)
{
$validation = $this->validate($request, [
'WithSpouse' => (\Input::has('spouse')) ? 1 : 0;
]
}
1st way is send correct value from frontend side
you can add jquery or javascript at frontend side on change event of checkbox :
<input type="checkbox" name="checkbox" id="myCheckbox" />
<script>
$(document).on('change','#myCheckbox',function(){
if($(this).is(':checked')){
$('#myCheckbox').val(1);
}else{
$('#myCheckbox').val(0);
}
});
</script>
at your backend side , now you can check :
$yourVariable=$request->input('checkbox');
2nd way is only check at your backend
you will get your checkbox value=on if it checked
if($request->input('checkbox')=='on'){
$yourVariable=1;
}else{
$yourVariable=0;
}
you can use ternary condition as well , like :
$yourVariable = $request->input('checkbox')=='on' ? 1:0;
You don't have to validate a checkbox value. because if its checked it sends the value of on, and if it's not checked it doesn't send anything.
So, all you need is that get whether the check box is checked or not, you can do as follow.
to retrieve the boolean value of the checkbox,
Controller
// since you haven't provide any codes in the controller what
// are you gonna do with this value,
// I will juts catch it to a variable.
$isChecked = $request->spouse == 'on'
To retrieve checkbox value from request as boolean:
$yourModel->with_spouse = (bool) $request->spouse;
If checkbox is checked then it's value (on by default) will be passed to request and casting non-empty string to boolean will give you true. If checkbox is not checked then spouse key won't be passed to request at all, so $request->spouse will return null. Casting null to boolean will result in false (in PHP true is int 1 and false is int 0, which is exactly what you want).
I have a form with a couple of radio buttons;
<div class="form-group{{ $errors->has('procurement') ? ' has-error' : '' }} col-md-6">
<label for="procurement" class="col-md-6 control-label">Procurement Type <span class="red">*</span></label><br>
<div class="col-md-12">
<input id="procurement" type="radio" name="procurement" value="owned"> Owned
<input id="procurement" type="radio" name="procurement" value="rental"> Rental
#if ($errors->has('procurement'))
<span class="help-block">
<strong>{{ $errors->first('procurement') }}</strong>
</span>
#endif
</div>
I am reusing the form for editing purposes so I want to be able to bind the object's value for 'procurement' when I present the form in edit view. I am able to use this bind the values for text inputs;
value="{{ isset($vehicle->model) ? $vehicle->model : old('model') }}"
But this does not work for radios or selects. What should I be doing? I am NOT using the Form facade for this.
Thanks!
You can use selected and checked for what you want to do. Just add it to the end of the element, and it will select/check the element.
Something like this for input type radio:
<input id="procurement" type="radio" name="procurement" value="owned" {{ old('model') === "owned" ? 'checked' : (isset($vehicle->model) && $vehicle->model === 'owned' ? 'checked' : '') }}> Owned
<input id="procurement" type="radio" name="procurement" value="rental" {{ old('model') === "owned" ? 'checked' : (isset($vehicle->model) && $vehicle->model === 'rental' ? 'checked' : '') }}> Rental
And this for select options:
<option value="something" {{ old('model') === "something" ? 'selected' : (isset($vehicle->model) && $vehicle->model === 'owned' ? 'selected: '')}}>Something</option>
Side note: I'd recommend making sure that old('something') comes before other possible values when you're filling values in. For instance, you had:
value="{{ isset($vehicle->model) ? $vehicle->model : old('model') }}"
which would override the user's original input with database results (if any, of course) upon a failed submission. So if I was say, updating my name in a text field, and there were errors to the form, it would direct me back to the form and lose my input because the database results are before the old value. Hope that makes sense!