livewire - set default option on a select field - laravel

I have a select element like this:
<select wire:model="state" >
<option value="">Choose a State:</option>
#foreach($state_list as $abbr=>$state)
<option >{{$state}}</option>
#endforeach
</select>
I'd like to have a default state that shows to the user. I've tried setting the $state property directly, and through the mount() method, and by using the SELECT attribute in the option.
As someone pointed out, I didn't have a value field. Additionally, in the actual code, this was a key on a property, so the field was actually name="bank[state]", so I had to add the state property in mount(), like this:
public function mount() {
$us_state_properties = ['address', 'bank'];
foreach($us_state_properties as $add) {
$this->{$add.".state"} = "Florida";
}
foreach($this->multi_us_state_properties as $add) {
$this->{$add.".0.state"} = "Florida";
}
}
And some fields were dynamically added within the form, as you can see in the second foreach loop.

I think it is because you forget the value in
<option value="{{$state}}">{{$state}}</option>
<select wire:model="state" >
<option value="">Choose a State:</option>
#foreach($state_list as $abbr=>$state)
<option value="{{$state}}">{{$state}}</option> <!-- this -->
<!-- <option value="{{$abbr}}">{{$state}}</option> --> <!-- or this ? -->
#endforeach
</select>
try to force test it
class FormSelectOption extends Component
{
public $state = 'FL';
...
}
Reference: https://laravel-livewire.com/screencasts/form-selects

Related

Laravel Livewire: Passing option value onChange of Select input

I am trying to pass a value from the <option> of my <select> input to my livewire controller component and echo the value.
Livewire Blade View Component:
{!! Form::select('goals',$goals_plucked,null,[
'placeholder' => trans('classes.backend.forms.select_goals'),
'class' => 'custom-select',
'id' => 'goals',
'wire:change' => "goals(this.val)",
]) !!}
This get's me an output of null in my Livewire Controller Component
Livewire Controller Component
public $goals;
public function goals($goals)
{
dd($goals);
}
After watching some tutorials. I also tried using 'wire:change' => "goals($event.target.value)", which gave me an error of Undefined variable $event, obviously because it was not defined in main controller. I am not sure what am I doing wrong here.
What I am trying to do: Trying to create a flow just like select country then select state and then select city. via livewire. Before selecting a country the inputs of the select state and city won't be visible
I tried below code and it worked for me well. Just had to make sure I use normal html form inputs and dynamically add options to it by foreach loop. Also used mount() function for getting getting values and id's for select dropdowns.
Livewire Blade View Component:
<select wire:model="goal" name="goal" class="form-control" required>
<option value="">
{!! trans('classes.backend.forms.select_goals') !!}
</option>
#foreach ($goals as $goal)
<option value="{{ $goal->id }}">{{ $goal->goals }}</option>
#endforeach
</select>
Livewire controller component
public $goals;
public $goal;
public function mount()
{
$this->goals = Goals::all()->isActive();
}
public function updatedGoal($value)
{
dd($value);
}
just give wire:model="variable_name" to select in front end.
and in livewire controller there should be a public variable with same name. it will automatically get the value on select value change.
below is the example of same
<select class="custom-select border-0 shadow-none" id="enquiry_for" wire:model="enquiry_for">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>

october cms ajax and options values

Is it possible to send value from options on example like this where x need to be value from option. This select im using on partial and ajax works with manualy added value as x. THX!
<select data-request-data = "id: x " class="form-control custom-select" data-request="onChangeValue">
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
Just give your select a name, an unique name.
name="some_unique_name"
<select name="my_super_special_name_for_select" class="form-control custom-select" data-request="onChangeValue">
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
</select>
Then when you change the value the value of the field is sent along in post
The result of:
public function onChangeValue()
{
traceLog(post());
}
In the log you will see then a result corresponding to
["my_super_special_name_for_select" => 5 ]
So you can fetch it with post('my_super_special_name_for_select') or whatever name you have given the select element to get the value.
public function onChangeValue()
{
$id = post('my_super_special_name_for_select');
}
Yes you can send value from select. But for this you will need to put it inside a form and then call data request on it. Value will be sent as part of post(). It can't be sent dynamically like the way you are using. if you can elaborate your external conditions more I can suggest other solutions too.

In Vuejs how do I bind select options to object

I'm trying to use interpolation in a template select options like normal
<select class="form-control" id="staff" name="staff">
<option selected disabled>- Select -</option>
#foreach($staff as $aStaff)
<option value="{{$aStaff->id}}">{{$aStaff->initials}}</option>
#endforeach
</select>
The compile error is clear
Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead.
But i'm still unsure of correct usage. Vue documentation simply gives example
<select v-model="selected">
<!-- inline object literal -->
<option v-bind:value="{ number: 123 }">123</option>
</select>
However i'm unsure how to translate this into using the foreach I need above
Something like this is invalid
<option :value="$aStaff->id">{{$aStaff->initials}}</option>
So just not sure how to interpret ?
Edit: tried using v-for, i get no errors but nothing in the select options
<select class="form-control" id="staff" name="staff">
<option selected disabled>- Select -</option>
<div v-for="aStaff in staff">
<option :value="aStaff.id">aStaff.initials</option>
</div>
</select>
I have staff defined in custom component:
<sale v-if="showModal" #sale="calcFees" :staff="{{$staff}}"></sale>
So when i simply do {{staff}} in the component page, it shows the data i expect to see.
Sale.vue component definition:
<script>
export default {
data: function () {
return {
price: null
}
},
props: {
staff: {
type: Array,
required: true
}
},
methods: {
onSale(){
this.$emit('sale', this.price)
}
}
}
</script>
The code is iterating over a div. Instead, iterate the option.
<option v-for="aStaff in staff" :value="aStaff.id">{{aStaff.initials}}</option>
And remove the div of course.

Exploding Value from Select Option Value

Now I'm working with Laravel 5.
I got value from select option like below:
select name="billing_provider" onChange="changeLanguage(this.value)"> #foreach($tests as $test)
option value="{{ $test->tax_id }},{{ $test->npi }}" name="billing_provider">
{{ $test->test_name }} </option>#endforeach </select>
Here I need to explode the option value and store it into another text field value.
How can I do that?
First, you have made a mistake building your HTML.
<select> has an attribute name which is going to be the key in the global arrays $_GET or $_POST.
However <option> doesn't have attribute name. You should remove that.
If you want to separate the value of billing_provider in your backend (php /w Laravel), do so.
In your method which handles the submission of the form:
$input = Input::get('billing_provider');
$billing_provider = explode(',', $input);
//Now $billing_provider[0] === $test->tax_id
//And $billing_provider[1] === $test->npi
Or if you want to perform this action before form submission and you're using jQuery, then you can do this:
https://jsfiddle.net/17fkpqbe/
JavaScript (/w jQuery):
$(document).ready(function() {
$('select').change(function() {
$('.inputs').html('');
var $explodedVal = $(this).val().split(',');
for(i = 0; i < $explodedVal.length; i++) {
$('.inputs').append('<input value="' + $explodedVal[i]+'">');
}
});
});
HTML:
<select>
<option></option>
<option value="123,555">Some Name 1</option>
<option value="123,444">Some Name 2</option>
<option value="123,333,555">Some Name 3</option>
</select>
<div class="inputs"></div>

Pass dropdown text to controller

I have below dropdown, how do I retrieve the dropdown selected dropdown text (not value) on MVC controller upon clicking the submit button (httppost)?
<select id="detailThing" name="MyList">
<option value="BMI">ListDetail1</option>
<option value="BMI">ListDetail2</option>
<option value="BMI">ListDetail3</option>
</select>
Put the <select> in a form and submit it to the controller. You will need a model with a string variable to pass the value into/through.
public class MyModel
{
public String myValue { get; set; }
}
in the view put this line at the top;
#model MyProject.Models.MyModel
then create an html form and put your select inside and create a submit button;
#using (Html.BeginForm("MyControllerMethod", "MyController", FormMethod.Post, new { id = "myform" }))
{
<select id="detailThing" name="myValue">
<option value="BMI">Putrajaya</option>
<option value="BMI">Sepang</option>
<option value="BMI">Hulu Langat</option>
</select>
<button type="submit">Submit</button>
}
setting the 'name' of the select to 'myValue' will link its 'selected' value to the variable on the model and pass it to the controller when the form is submitted. Hope this helps!
Update:
change the values to be the same as the display text,
<select id="detailThing" name="myValue">
<option value="Putrajaya">Putrajaya</option>
<option value="Sepang">Sepang</option>
<option value="Hulu Langat">Hulu Langat</option>
</select>

Resources