I want to get the value of $animal when I select an option so I can press the button and see detailed info of this option.
Code
#foreach ($animais as $animal)
<option value="{{ $animal->id }}">{{ $animal->nome }}</option>
#endforeach
</select>
<button type="submit">Ver</button>
One the HTML page is written from the PHP, that value is a node in the DOM, and you can access it through javascript.
window.addEventListener('DOMContentLoaded', () => {
document.querySelector('select.example').addEventListener('change', e => {
console.log('value selected: ', e.target.value, 'from text', e.target.options[e.target.selectedIndex].text)
})
})
<select class='example'>
<option value='zebra'>animal</option>
<option value='carrot'>vegetable</option>
</select>
Related
Hye,
I want to get dropdown selected data.
For your information, my dropdown data is from my database. I already retrieve data from database and put it inside my dropdown.
Right now, I want to make validation. If user key in all information and forgot to key in 1 column data, the dropdown part should get the previous selected data right? So here are my coding, I still can get the previous selected data.
<div>
<x-label for="pizzatype" :value="__('Choose pizza type:')" />
<select name="pizzatype" id="pizzatype">
<option selected disabled>Please choose</option>
#foreach ($pizzainfo as $pizzaitem)
<option value="{{ old('$pizzaitem->name') }}">{{ $pizzaitem->name }}</option>
#endforeach
</select>
</div>
All dropdown button should get the selected previous button...
As I understand the problem is that you are trying to get an old() value that does not exist...
the quick fix is :
<select name="pizzatype" id="pizzatype">
<option #if(!old('pizzatype')) selected #endif disabled>Please choose</option>
#foreach ($pizzainfo as $pizzaitem)
<option #if(old('pizzatype') == $pizzaitem->name) selected #endif value="{{ $pizzaitem->name }}">{{ $pizzaitem->name }}</option>
#endforeach
</select>
As stated in the title, I want to dynamically change the available options of an HTML select box, based on the selection of another HTML select box, using PHP only if possible.
So far, I have managed to pass the data from each table into the view but I do not know how to use the primary and secondary keys in this context and without writing logic into the view file, respecting safety precautions.
What I have:
Controller:
...
use Illuminate\Support\Facades\DB;
...
public function create()
{
$sport_categories = DB::table('sport_categories')->get();
$sports = DB::table('sports')->get();
return view('events.create',
[
'sport_categories' => $sport_categories,
'sports' => $sports
]
);
}
View:
<div id="event-sport-category">
<span>Sport Category:</span>
<select name="sport-category">
<option value="default" selected="selected" disabled hidden>Select Sport Category</option>
#foreach($sport_categories as $sport_category)
<option value="{{ $sport_category->id }}" title="{{ $sport_category->desc }}">{{ $sport_category->name }}</option>
#endforeach
</select>
</div>
and
<div id="event-sport">
<span>Sport:</span>
<select name="sport">
<option value="default" selected="selected" disabled hidden>Select Sport</option>
#foreach($sports as $sport)
<option value="{{ $sport->id }}" title="{{ $sport->desc }}">{{ $sport->name }}</option>
#endforeach
</select>
</div>
The database tables are:
sport_categories (id, name, desc)
and
sports (id, sport_category_id, name, desc)
You'll need to use some sort of Javascript for this to work like you want. As #Clint suggested, since PHP is server-side, you won't be able to change your UI at runtime.
The good news is, you can keep everything you've already done. Depending on your comfort level with Javascript, it could be as easy as doing a show/hide of different html inputs based on what is selected.
Using jQuery, you could do something like this:
<div id="event-sport-category">
<span>Sport Category:</span>
<select name="sport-category" id="sportCategory">
<option value="default" selected="selected" disabled hidden>Select Sport Category</option>
#foreach($sport_categories as $sport_category)
<option value="{{ $sport_category->id }}" title="{{ $sport_category->desc }}">{{ $sport_category->name }}</option>
#endforeach
</select>
</div>
<div id="event-sport-one">
<span>Sport:</span>
<select name="sport" id="sport">
<option value="default" selected="selected" disabled hidden>Select Sport</option>
#foreach($sports as $sport)
<option value="{{ $sport->id }}" title="{{ $sport->desc }}">{{ $sport->name }}</option>
#endforeach
</select>
</div>
<div id="event-sport-two">
<span>Sport:</span>
<select name="sport" id="sportTwo">
<option value="default" selected="selected" disabled hidden>Select Sport</option>
#foreach($sportsTwo as $sportTwo)
<option value="{{ $sportTwo->id }}" title="{{ $sportTwo->desc }}">{{ $sportTwo->name }}</option>
#endforeach
</select>
</div>
jQuery
$(document).ready(function(){
$("#sportCategory").change(function(){
var category = $(this).children("option:selected").val();
console.log('selected category: ', category);
if (category == 'foo') {
// show sports related to foo
// hide & reset everything else
...
$('#event-sport-two').show();
$('#event-sport-one').hide();
}
});
});
CSS
#event-sport-two {
display: none;
}
Doing something like that would render/hide all of your available options when the page loads. You'd use CSS to hide the actual form elements, then using jQuery you could show/hide things as needed. This could get messy if you have a lot of things to manage.
Another option would be to make your form a Vue component. You could then use v-show based on what was chosen.
A final alternative (using either way) would be to listen for the input to change -- then make an ajax request to get your data and show the input based on the server's response.
Vue would give you a bit cleaner code. You could get the data and only show what's needed and not have to worry about all the show/hide business. :)
Hope that helps!
I've been racking my head and can't seem to find something that will work to apply Laravel session value to selected value for drop-down menu. Here's the code I currently have. Greatly appreciate any help. Thanks.
<select class="form-control ml-2" style="width: 300px;" name="memberNameFilter" id="memberNameFilter">
<option value="-1">Member Name All</option>
#foreach($member_names as $names)
<option value="{{ $names->MemberName }}" #if($names->MemberName == request()->session()->get('memberNameFilter')) selected="selected" #endif>{{ $names->MemberName }}</option>
#endforeach
</select>
Use the session helper function
For example, put something in the session
Route::get('/', function () {
session(['foo' => 'bar']);
return view('welcome');
});
And display it like so
<select name="" id="">
<option value="{{ session('foo') }}">{{ session('foo') }}</option>
<option value="baz">Baz</option>
</select>
Result
I'm newbie at Laravel and on stackoverflow. I'm making an app for registration. I want to show all those ids of section where class_id is selected in upper dropdown.
$cid=DB::table('classses')->get();
$counterr=0;
$sec=DB::table('sections')->where('class_id',$cid)->get();
$counterrr=0;
Dropdown menu for Class
<div class="col-md-6">
<select class="" name="class_id">
<option value="null">Class</option>
#foreach($cid as $cc)
#if($counterr==0)
<option selected="selected" value="{{$cc->id}}">{{$cc->title}}</option>
{$counterr++}}
#else
<option value="{{$cc->id}}">{{$cc->title}}</option>
#endif
#endforeach
</select>
Dropdown menu for Section where I want to get all the values of section where class_id is upper selected
<select section="" name="section_id">
<option value="null">Section</option>
#foreach($sec as $sc)
#if($counterrr==0)
<option selected="selected" value="{{$sc->id}}">{{$sc->title}}</option>
{{$counterrr++}}
#else
<option value="{{$sc->id}}">{{$sc->title}}</option>
#endif
#endforeach
</select>
Please help me in these case. You can freely ask anything if you want to.
You do not need to set a $counter in order to set the first select option to selected. Instead, you can check if the $key == 0:
<select class="" name="class_id">
<option value="null">Class</option>
#foreach($cid as $key => $cc)
<option {{ $key == 0 ? 'selected="selected"' : '' }} value="{{$cc->id}}">{{$cc->title}}</option>
#endforeach
</select>
Here we use a ternary expression to echo out the selected option based on if $key equals 0. If not, it will not echo out anything.
I want to update two values in my data I want to update the first value as an int and the other one is string.
TABLE STRUCTURE
here is my input, the value aircraft_id is the first one to update and the other one is the aircraft_refistration_number
<select name="aircraft_id" class="form-control" id="">
<option value="0" disabled="true" selected="true"> Select </option>
#foreach ($aircrafts as $aircraft)
<option value="{{ $aircraft->aircraft_id }}">{{ $aircraft->aircraft_registration_number }}</option>
#endforeach
</select>
here is my table
here is where i update the registered_company_name which has to be string but then the output is the aircraft_id
$txtDescript = $request->input('aircraft_id');
$aircraft = DB::table('settings')
->where('id', 4)
->update(['description' => $txtDescript]);
here is the aircraft_id which should be int or id's
$airid = $request->input('aircraft_id');
$aircraft = DB::table('series')
->update(['aircraft_id' => $airid]);
this one perfectly works
here is my output of the problem
WHEREAS it should be like THIS output which should be correct
you can take this longer form,
<select name="aircraft_id" class="form-control" id="">
<option value="0" disabled="true" selected="true" id="airselect"> Select </option>
#foreach ($aircrafts as $aircraft)
<option value="{{ $aircraft->aircraft_id }}">{{ $aircraft->aircraft_registration_number }}</option>
#endforeach
</select>
<input type="hidden" name="aircraft_name" id="aircraft_name" value="">
and set the value of the hidden field using jquery like so
$(document).ready(function(){
$(document).on('change','.airselect',function(){
$selected=$( "#airselect option:selected" ).text();
$('#aircraft_name').val($selected);
});
});
and then adjust your controller like so
$txtDescript = $request->input('aircraft_name');
$aircraft = DB::table('settings')
->where('id', 4)
->update(['
description' => $txtDescript]);
and
$airid = $request->input('aircraft_id');
$aircraft = DB::table('series')
->update(['aircraft_id' => $airid]);
try it and let me here from you, i did not test the code