How to add laravel collective onclick in "select"? My below code does not work:
{{Form::select('material_selector', [
'10' => 'Cotton',
'20' => 'Wet Look',
'30' => 'Crocodile',
], null, ['placeholder' => 'Select Material'],['class'=>'form-control','onclick'=> 'showSelectedValue()' ])
}}
You should probably use jQuery. Then you can address your select element as follows
$(document).ready(function() {
$('.form-control[name="material_selector"]').on('change', showSelectedValue);
function showSelectedValue(event) {
var target = $(event.target);
console.log(target.val() + " = " + target.find('option:selected').text());
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="material_selector" class="form-control">
<option value="10">Cotton</option>
<option value="20">Wet Look</option>
<option value="30">Crocodile</option>
</select>
If you are really need to use the onClick attribute you can try this
{{Form::select(
'material_selector', // name attribute of the select
['10' => 'Cotton', '20' => 'Wet Look', '30' => 'Crocodile'], // option values
null, // selected value, for example '20'
['placeholder' => 'Select Material', 'class' => 'form-control'], // attributes for <select>
['onClick' => 'showSelectedValue()'] // attributes for <option>
)}}
Related
I'm trying to make a dependent select with Livewire.
My problem is that when I load the second select, it loads it without problems, but when I select an option from the second select, it throws me this error.
Attempt to read property "nombre" on array
select template
<div class="container">
<div class="row mb-3">
<div class="col-4">
<label class="form-label">Tipo de Inscripcion</label>
<select wire:model="selectedTipoInscripcion" class="form-select">
<option selected>Seleccionar ...</option>
#foreach($tipoInscripcion as $tipo)
<option value="{{ $tipo -> id }}">{{ $tipo -> nombre}}</option>
#endforeach()
</select>
</div>
#if(!is_null($tipoPrograma))
<div class="col-4">
<label class="form-label">Tipo de Programa</label>
<select wire:model="selectedTipoPrograma" class="form-select">
<option selected>Seleccionar ...</option>
#foreach($tipoPrograma as $tipo)
<option value="{{ $tipo -> id}}">{{ $tipo -> nombre}}</option>
#endforeach()
</select>
</div>
#endif
</div>
</div>
The problem is in
<option value="{{ $tipo -> id}}">{{ $tipo -> nombre}}</option>
My Component
<?php
namespace App\Http\Livewire;
use App\Models\Curso;
use App\Models\Programa;
use Livewire\Component;
class SelectAnidado extends Component
{
public $selectedTipoInscripcion = null, $selectedTipoPrograma = null, $SelectedProgrCur = null;
public $tipoPrograma = null, $progrCur = null, $sw = null;
public function render()
{
$programa = (object) ['id' => 1, 'nombre' => 'Programa'];
$curso = (object) ['id' => 2, 'nombre' => 'Curso'];
$ti = collect([$programa, $curso]);
return view('livewire.select-anidado', [
'tipoInscripcion' => $ti
]);
}
public function updatedselectedTipoInscripcion($id)
{
if ($id == 1) {
$doctorado = (object) ['id' => 1, 'nombre' => 'doctorado'];
$maestria = (object) ['id' => 2, 'nombre' => 'maestria'];
$especialidad = (object) ['id' => 3, 'nombre' => 'especialidad'];
$diplomado = (object) ['id' => 4, 'nombre' => 'diplomado'];
$this->tipoPrograma = collect([$doctorado, $maestria, $especialidad, $diplomado]);
}
}
}
It tells me that I am trying to access an array as if it were an object.
But then the error should also appear when the is loaded.
Why does it only appear when I make the selection?
I think problem is here :
$this->tipoPrograma = collect([$doctorado, $maestria, $especialidad, $diplomado]);
you're passing array in tipoPrograma, and each variables is array too.
I have the following select section in HTML and CSS taken from ADMIN LTE
<select class="form-control select2" style="width: 100%;">
<option selected="selected">Alabama</option>
<option>Alaska</option>
<option>California</option>
<option>Delaware</option>
<option>Tennessee</option>
<option>Texas</option>
<option>Washington</option>
</select>
I need to convert it to Laravel Form Elements and I tried as follows:
{{Form::select('filter_region', [
'1' => 'Alaska',
'2' => 'California',
'3' => 'Delaware',
], null, ['placeholder' => 'Alaska'],['class'=>'form-control select2'])}}
But the views are different
How to resolve this?
I have implemented a drop down using Laravel collectives. I need to call function setMaterialValue(let x){ console.log(x)} on each time I select a material. This should be specific to each material as cotton-10, wetlook-20, crocodile-30 etc. Without Laravel collective this can be performed as
<option onclick="setMaterialValue(10);">Cotton</option>
How to perform this using Laravel collectives?
My code is as follows:
<div class="card">
<div class="card-header"><h2 class="card-title m-0">Feature Selector</h2></div>
<div class="card-body">
<h5 class="card-title"><b>Material Selector</b></h5>
<div class="row">
<div class="col-md-6">
Textile Material
</div>
<div class="col-md-6">
{{Form::select('material_selector', [
'10' => 'Cotton',
'20' => 'Wet Look',
'30' => 'Crocodile',
], null, ['placeholder' => 'Select Material'],['class'=>'form-control'])
}}
</div>
</div>
<hr>
</div>
</div>
FYI - Where your class declaration is add it and any other html attributes there as well:
{{ Form::select('material_selector',
[
'1' => 'Cotton',
'2' => 'Wet Look',
'3' => 'Crocodile',
],
null,
['placeholder' => 'Select Material'],
[
'class'=>'form-control',
'onclick'=>'setMaterialValue(10)' // <== ADD IT HERE
])
}}
You should probably use jQuery. Then you can address your select element as follows
$(document).ready(function() {
$('.form-control[name="material_selector"]').on('change', showSelectedValue);
function showSelectedValue(event) {
var target = $(event.target);
console.log(target.val() + " = " + target.find('option:selected').text());
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="material_selector" class="form-control">
<option value="10">Cotton</option>
<option value="20">Wet Look</option>
<option value="30">Crocodile</option>
</select>
Another option
If you really do not want to use jQuery, then try to use the onChange attribute for the select tag like the example below
{{Form::select(
'material_selector', // name attribute of the select
['10' => 'Cotton', '20' => 'Wet Look', '30' => 'Crocodile'], // option values
null, // selected value, for example '20'
['placeholder' => 'Select Material', 'class' => 'form-control', 'onChange' => 'showSelectedValue(this)'], // attributes for <select>
)}}
function showSelectedValue(element) {
console.log(element.value + " = " + element.options[element.selectedIndex].text);
}
<select name="material_selector" class="form-control" onChange="showSelectedValue(this)">
<option value="10">Cotton</option>
<option value="20">Wet Look</option>
<option value="30">Crocodile</option>
</select>
Having searched and tried to resolve this I can't seem to work it out.
I have a simple static method in a class that returns a list of options. I am using this to populate a select element in a form. This works fine but I'm using the Laravel blade shortcut language and the value of each option is coming out as the index of the array, which is sent to the database when persisting the results of the form:
{!! Form::select('type', \App\Http\Utilities\Airporttype::all(), null, ['class' => 'form-control'] ) !!}
HTML produced:
<select class="form-control" id="type" name="type">
<option value="0">Commercial</option>
<option value="1" selected="selected">Military</option>
<option value="2">Galactic</option><option value="3">Private</option>
</select>
Static method called:
class Airporttype
{
protected static $types = [
"Commercial",
"Military",
"Galactic",
"Private",
];
public static function all()
{
return static::$types;
}
}
By using the 'null' option, it will give me the option = selected if the database matches what is already saved for that record.
I can achieve it buy doing the following, but wanted to use the blade shortcode style as it's clean (below is what I have tested elsewhere in te form and works):
<select id="country" name="country" class="form-control">
#foreach (\App\Http\Utilities\Country::all() as $country => $code)
<option value="{{ $country }}" #if ($country == $airport->country) selected = 'selected' #endif>{{ $country }}</option>
#endforeach
</select>
Array dump of Aiporttype::all();
array (size=4)
0 => string 'Commercial' (length=10)
1 => string 'Military' (length=8)
2 => string 'Galactic' (length=8)
3 => string 'Private' (length=7)
Thanks
If I've understood you correctly, you need something like this:
{!! Form::select('type', \App\Http\Utilities\Airporttype::all(), $airport->country, ['class' => 'form-control'] ) !!}
UPDATE:
If you have types in strings, you can try to change your array to:
protected static $types = [
'commercial => 'Commercial',
'military' => 'Military',
'galactic' => 'Galactic',
'private' => 'Private',
];
To get an array indexed by its values you can try something like this
$types = \App\Http\Utilities\Airporttype::all();
$types = array_combine($types, $types);
-- view --
{!! Form::select('type', $types, null, ['class' => 'form-control'] ) !!}
Working Fine for me...
In controller
View::share('types',\App\Http\Utilities\Airporttype::all());
In View
{!! Form::select('types',array(''=>'- Select types -')+$types,Input::get('types',null),array('class'=>'form-control')) !!}
You can use array_flip function in php:
{!! Form::select('type', array_flip(\App\Http\Utilities\Airporttype::all()), $airport->country, ['class' => 'form-control'] ) !!}
Simple elegant function!
I need to add data attributes to individual options in a JHtml generic list in Joomla 2.5.
In standard html, the select list looks like:
<select class="field" placeholder="<?php echo JText::_('COUNTRY')?>" name="country" id="country" autofocus="autofocus" autocorrect="off" autocomplete="off">
<option value="" selected="selected">Select Country</option>
<option value="Afghanistan" data-alternative-spellings="AF">Afghanistan</option>
<option value="Åland Islands" data-alternative-spellings="AX Aaland Aland" data-relevancy-booster="0.5">Åland Islands</option>
<option value="Albania" data-alternative-spellings="AL">Albania</option>
...
</select>
Normally when creating an option I would do:
$options=array();
$options[]=JHTML::_( 'select.option', "Afghanistan", "Afghanistan" );
$options[]=JHTML::_( 'select.option', "Albania", "Albania" );
...
$dropdown = JHTML::_('select.genericlist',$options,'country','id="country" autofocus="autofocus" autocorrect="off" autocomplete="off"','value','text',$default);
How would I add the data-alternative-spellings="AF" to each option?
Thanks
It is in fact possible:
$data = array(
array(
'value' => 'redapple',
'text' => 'Red apple',
'attr' => array('data-price'=>'5'),
),
array(
'value' => 'greenapple',
'text' => 'Green apple',
'attr' => array('data-price'=>'3'),
),
);
$options = array(
'id' => 'applesfield', // HTML id for select field
'list.attr' => array( // additional HTML attributes for select field
'class'=>'field-apples',
),
'list.translate'=>false, // true to translate
'option.key'=>'value', // key name for value in data array
'option.text'=>'text', // key name for text in data array
'option.attr'=>'attr', // key name for attr in data array
'list.select'=>'greenapple', // value of the SELECTED field
);
$result = JHtmlSelect::genericlist($data,'apples',$options);
This will result in:
<select id="applesfield" name="apples" class="field-apples">
<option value="redapple" data-price="5">Red apple</option>
<option value="greenapple" data-price="3" selected="selected">Green apple</option>
</select>
Explanation:
I had already extended JHtmlSelect and overridden genericlist() when I found out I really on needed to set an option for genericlist(): 'option.attr'.
The parameters of JHtmlSelect::genericlist() are rather complicated, but simply: if the third parameter is array and it's the last parameter you pass, it will be used to populate genericlist's options.
'option.attr' will set the key for your option's extra attributes. If this is set, you can add as many attributes to your options as you like, as shown in the $data array above.