Livewire resets dropdown input - php

Context
I have a form built fully using a livewire component because I need to bind several inputs to do real-time calculations. I expect the dropdown items not to change, but the text input fields need to be dynamic.
Problem
when I enter a value into a binded <input> field, the previously selected items in the <select> dropdown gets reset.
Gif of the issue:
(![gif on the issue](https://i.imgur.com/FbbuiN7.gif))
I tried using the "old('VALUE')" function, but it appears to have no effect.
This is the code of "project" selector input (The stage selector code is identical):
<select id="range_project_id" name="project_id" value="{{ old('project_id') }}"
class="px-2 form-select" disabled form="create-land-registry-form">
<option selected>Choose a project..</option>
<option disabled>{ID}:{Name}</option>
#foreach (App\Models\Project::all() as $project)
<option value="{{ $project->id }}">
{{ $project->id . ': ' . $project->name }}
</option>
#endforeach
</select>
This is the code of one of the range selectors:
<div class="row">
<input wire:model.lazy="landRangeStart" type="text" name="land_id_start"
id="land_range_start" disabled form="create-land-registry-form"
class="col-3 form-control-lg border mx-2" placeholder="Starting from"
value="{{ old('land_id_start') }}" />
</div>
I tried using the "old('VALUE')" function, but it appears to have no effect.

In the parent div, add wire:ignore.self.
For example:
<div wire:ignore.self><-- Parent div -->
//Your other dropdown code in here
</div>
This directive tells Livewire to ignore changes to a subset of HTML within your component.

As you are using the raw HTML select and not a third party library, like Select2, my question is, why not bind the select value to the livewire component like so?
This would solve your problem and the component would be aware of the value from the get go.

Related

laravel fetch only the previously selected option submitted previously on a edit form

I've got a form that submits correctly, but it has a value on a question appended to a name, now to edit i'm almost done in the edit form, but the blade php with the foreach argument fetches all options from the select, i want to show and be able to edit the previously selected option. how do i do this on blade php.
resuming i want to submit it first then in dashboard of the form results have a button of edit and be able to edit the previously submited forms.
here's the code:
<select name="quilometragem" id="mySelect" class="chosen-select" onchange="myFunction()">
#foreach($viaturas as $item)
<option value="{{ $item->matricula }}:{{ $item->quilometragem }}">
{{ $item->matricula }}
</option>
#endforeach
</select>
<p id="demo"></p>
<div class="form-group mb-3">
<label for="">Chegada Kms</label>
<input type="number" name="kmfim" class="form-control">
</div>
<script>
function myFunction() {
var x = document.getElementById("mySelect").value;
document.getElementById("demo").innerHTML = "Matricula:QuilómetrosCorrentes: " + x;
}
</script>

Selected value in dropdown vue component

I have a Vue component for form and there is a dropdown in that form as follows,
<select class="block appearance-none w-full"v-model="this.languages" name="language_id">
<option v-for="language in languages" v-bind:value="(lan.id === language.id) ? lan.id : language.id" :selected= "lan.name"> {{ language.name }}
</option>
</select>
It is using the same vue component for both create & edit. In edit, there should be editing item's value (declared it as lan) as selected option in dropdown. I have tried as above & it don't have selected value. what is the wrong with my method?
Thank you!
Fortunately I found the answer. it is as follows,
<select class="block appearance-none w-full" v-model="lan.id" name="language_id">
<option v-for="language in languages" v-bind:value="(lan.id === language.id) ? lan.id : language.id"
</option>
</select>
I have placed item's value in v-model.

Setting the selected value of a dropdown option

I'm working on a simple calculator app in Laravel Blade. We have not moved to models yet, just working in views and routes, so I keep running into options I haven't learned how to use yet.
My application is running without issue but is not retaining the selected value in the dropdown on POST. I am able to print the value to the screen, and it is working in a later selector.
I think I just need to write an if statement in the options to set the selected value, but I can't find syntax that I understand/am allowed to use in this project.
<div class="form-group">
<select class="form-control form-control-lg" id="operatorInput" name="operatorInput" value="{{Session::get('operator')}}">
<option value="+" #if(Session::get('operatorInput') == "+" ? "selected" : "" )#endif>Addition (+)</option>
<option value="-" #if(Session::get('operatorInput') == "-" ? "selected" : "" )#endif>Subtraction (-)</option>
</select>
</div>
I get a throwable error on this example, so I know it isn't correct.
The throwable error is due to calling the Session Facade without the \ root indicator, use the session helper instead
For example routes/web.php
Route::get('/', function () {
session(['operatorInput' => '-']);
return view('welcome');
});
And welcome.blade.php
<div class="form-group">
<select class="form-control form-control-lg" id="operatorInput" name="operatorInput"
value="{{ session('operator') }}">
<option value="+" {{ (session('operatorInput') == "+") ? "selected" : "" }}>Addition (+)</option>
<option value="-" {{ (session('operatorInput') == "-") ? "selected" : "" }}>Subtraction (-)</option>
</select>
</div>
Result
You can keep your current code but you need to add a backslash \ before the \Session facade alias, but I find the helper function to be more elegant for a view file (and shorter)
Hope this helps

Select is not gettion the value of the option

I am working in laravel and I am passing a model into a view and I am showing one of the attributes of the model in every option but I need that the value is another one, something like showing the name of a model but I need to save the id but it it getting all the model. the code is:
<div class="form-group">
<div class="col-sm-12">
<label for="select2">Persona</label>
<select name="persona" id="persona" class="select2" required>
#foreach ($personas as $persona)
<option value="{{$persona->persona_id}}">{{$persona-
>getNombreApellidoPersona()}}</option>
#endforeach
</select>
</div>
</div>
the method getNombrePersona() is working because is returning the name and the lastname from the table, but when I return what the request give me, this what it is return in the row persona:
"tipo_usuario" => "{"tipo_usuario_id":2,"cliente":1,"nombre":"admin finca","fecha_insert":"2017-04-20 16:58:24","fecha_update":"2017-04-20 16:58:24","eliminado":0}"
And in the chrome when I check the source code in that part this is what it is shown:
<option value="{"persona_id":1,"nombre":"juan","apellido":"aguirre","correo_electronico":null,"fecha_insert":"2017-04-17 20:42:16","fecha_update":"2017-04-17 20:42:16","eliminado":0}">name last name</option>
It is like if the value that I give is replace by the whole information if the model.
I do not know why this is happening, I know that I can simply take the "persona_id" from the whole model but I want to know if it is possible to take directly from the select.
Change loop part to this:
<option value="{{ $persona->persona_id }}">{!! $persona->getNombreApellidoPersona() !!}</option>
By default, Blade {{ }} statements are automatically sent through PHP's htmlspecialchars function to prevent XSS attacks. If you do not want your data to be escaped, you may use the following syntax:
Hello, {!! $name !!}
https://laravel.com/docs/5.4/blade#displaying-data

Show selected option from database in laravel

I am a newbie in laravel.
In my database, I have two tables, News(id, id_type) and Type(idtype,name). And in post News page, I use dropdown to select Type for my new news.
So, when I want to show the type name of this News, I do:
<div class="controls">
<select multiple name="Type">
#foreach($type as $type)
<option
#if($news->id_type == $type->idtype)
selected="selected"
#endif
value="{{$type->idtype}}">{{$type->name}}</option>
#endforeach
</select>
</div>
But I have wrong result for all type in Type tables.
Help me,please and thanks for your help!!
The single equals is for assignment while two equals is for comparison. Change this line to be
#if($news->id_type == $type->idtype)
The code block within #foreach can be modified to serve the purpose of selecting a news type corresponding to each news.
<select name="Type" id="Type" class="form-control">
#foreach($type AS $data)
<option value="{{ $data->idtype }}">{{ $data->name }}
</option>
#endforeach
</select>
The #if codeblock is not working as you think it is supposed to. So, better remove it.
Now if you want to get the type associated with each news then you can very well specify it in your Controller and get the news as per the type_id.
Code snippet from your Controller will be more helpful.

Categories