populate drop-down list with database using ajax in laravel - html

i'm trying to fetch data from the database in dropdown list but it is not showing ,i have also watch several tutorials but things are not working as expected
Controller :
public function cost(Request $request){
$lab_data = \DB::table('lab_category')->select('category_name')->get();
//return $lab_data;
return view('medicinecost')->with('lab_category',$lab_data);
}
Route :
Route::get('labdetails','Test#cost');
Route::get('labprice',function (){
return view('pages/medicinecost');
});
medicinecost.blade.php
<div class="form-group">
<select name="labCat" id="lab" class="form-control input-lg dynamic" data-dependent="labSubCat">
<option value="{{$lab_data}}">Select Lab Category</option>
#foreach($lab_data as $lb)
<option value="{{$lb->lab_category_id}}">{{$lb->category_name}}</option>
#endforeach
</select>
</div>
I am getting this error
ErrorException in 1180188cd7aaaebdb54a13bbf08bc2d80ab30f15.php line 15:
Undefined variable: lab_data (View: C:\xampp72\htdocs\hospital\resources\views\pages\medicinecost.blade.php)

use this
<div class="form-group">
<select name="labCat" id="lab" class="form-control input-lg dynamic" data-dependent="labSubCat">
<option value="">Select Lab Category</option>
#if(isset($lab_category))
#foreach($lab_category as $lb)
<option value="{{$lb->lab_category_id}}">{{$lb->category_name}}</option>
#endforeach
#endif
</select>
</div>
Route::get('labprice',function (){
$lab_data = \DB::table('lab_category')->select('category_name')->get();
//return $lab_data;
return view('pages/medicinecost')->with('lab_category',$lab_data);
});

In Controller you need to select lab_category_id as well :
$lab_data = \DB::table('lab_category')->select('lab_category_id','category_name')->get();
Also fix the way you pass params, And no need to pass lab_category :
return view('medicinecost')->with('lab_data');
In view make its default value like 0 or empty:
<option value="0">Select Lab Category</option>

try this code
controller
return view('medicinecost',['lab_category'=>$lab_data]);
medicinecost.blade.php
<div class="form-group">
<select name="labCat" id="lab" class="form-control input-lg dynamic" data-dependent="labSubCat">
<option value="">Select Lab Category</option>
#foreach($lab_category as $lb)
<option value="{{$lb->lab_category_id}}">{{$lb->category_name}}</option>
#endforeach
</select>
</div>

Error is here
<option value="{{$lab_data}}">Select Lab Category</option>
and also here
#foreach($lab_data as $lb)
You're defining $lab_data in the controller, but passed with the variable of lab_category in the view
So, used #foreach($lab_category as $lb) as they mentioned before in the answer and remove {{ $lab_data }} in the option-value

You may try this.
Your Controller
public function cost(Request $request){
$lab_category = \DB::table('lab_category')->select('category_name','lab_category_id')->get();
return view('medicinecost', compact('lab_category'));
}
Your View
<div class="form-group">
<select name="labCat" id="lab" class="form-control input-lg dynamic" data-dependent="labSubCat">
<option value="">Select Lab Category</option>
#foreach($lab_category as $lb)
<option value="{{$lb->lab_category_id}}">{{$lb->category_name}}</option>
#endforeach
</select>
</div>

Related

How to get html select's selected option value with Express.js?

I'm using a html dropdown in my project. How do I get the select value in the Express server?
<div class="mb-3">
<label for="kk" class="form-label">Designation</label>
<select class="form-select" name="picker" aria-label="Default select example" id="kk">
<option selected>Select</option>
<option value="1">Proffesor</option>
<option value="2">Associate Proffessor</option>
<option value="3">Lab Assistant</option>
</select>
</div>
In my post request handling method I have used this code to get the value:
const f = req.body.picker;
What this gives me is the index of the selected values in the dropdown like 0,1,2 etc instead of actual values like professor, associate professor,lab assistant.
You actually get what is in value attribute of the selected option when you send your request. For the data you want, you can do it this way:
<div class="mb-3">
<label for="kk" class="form-label">Designation</label>
<select class="form-select" name="picker" aria-label="Default select example" id="kk">
<option value="" selected>Select</option>
<option value="Proffesor">Proffesor</option>
<option value="Associate Proffessor">Associate Proffessor</option>
<option value="Lab Assistan">Lab Assistant</option>
</select>
</div>
And that is what you will get :
const f = req.body.picker; // -> "" or "Proffesor" or "Associate Proffessor" or "Lab Assistan"

How can I add a url to a select input's option?

Im trying to create a liste box with each of the item send to a different profile
I have my variable $ru who get all the users it's working .
I tryed this but it's not working:
<select class="chosen form-control" name="User" style="height:28px" >
<option selected="selected"> Rechercher </option>
#foreach($ru as $user)
<option value="/profile/$user->id ">
{{$user->name}}
</option>
#endforeach
</select>
Cant add an href like that just add it to the value and use an event listener:
Add the jquery link to you script tag, replace my url and value with yours.
$(document).ready(function(){
$('#user').change(function(){
window.location = this.value;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="chosen form-control" name="User" id="user">
<option>Select profile</option>
<option value="http://www.google.com"> user name </option>
</select>
source : stackoverflow
href Link is not possible in select / option. You can use jQuery to redirect to the profile selected.
Following is the example:
<select class="chosen form-control" name="User" style="height:28px" >
<option selected="selected">
Rechercher
</option>
#foreach($ru as $user)
<option value="{{ url('/profile/'.$user->id) }}">{{$user->name}}
</option>
#endforeach
</select>
<script>
$(document).ready(function(){
$('[name="User"]').change(function(){
var profile_url = $('[name="User"]').value();
// redirect to user profile
if(profile_url != "")
window.location.href = profile_url;
});
});
</script>
try this
<select required class="form-control" id="user" name="User" onchange="getUser()" required>
<option value="All">--All--</option>
#foreach($ru as $user)
<option value="{{ $user->id }}" {{ (old('user')== $user->id||($user) == $user->id) ? "selected" : "" }}>{{$user->name}}</option>
#endforeach
</select>
//javascript
function getUser()
{
var t= $('#user').val();
if(t!= "" ){
location.href="/profile/"+t;
}
}

Bootstrap´s 4 PlaceHolder on Select Angular 4

i made a Select with dynamic values using ngModel directive and the Bootstrap Framework, it works. My problem is that i want to add a placeholder, but the ng directive seems to ruining it.
Here is what i have:
<select [(ngModel)]="usuario.pais" name="s" class="form-control">
<option value="">Select a Country</option><!--My PlaceHolder-->
<option *ngFor="let pais of paises" value="pais.codigo">{{pais.nombre}}</option>
</select>
Any suggestions?
Maybe try this:
In TS:
public usuario = {pais: ''};
public paises = [{nombre: 'la France', codigo: 'fr'}, {nombre: 'deutscheland', codigo: 'de'}];
in HTML:
<select [(ngModel)]="usuario.pais" name="s" class="form-control">
<option value="">Select a Country</option>
<option *ngFor="let pais of paises" [value]="pais.codigo">
{{pais.nombre}}
</option>
</select>

AngularJS: Select option is not selected by default

Hi My current scenario is this: I want a default value too that should select.. Even if select is selected then also acceptable.. but it is blank at first..My code is this
<select class="form-control" ng-options="tsk.value for tsk in task.dropdown_values track by tsk.id" ng-model="selectedItem" ng-change="checkvalue(task.id, selectedItem)" style="width:100%;margin-right:4%;">
</select>
I'ave used this code too but not working :(
<select class="form-control" ng-options="tsk.value for tsk in task.dropdown_values track by tsk.id" ng-model="selectedItem" ng-change="checkvalue(task.id, selectedItem)" style="width:100%;margin-right:4%;">
<option selected="selected">Select</option>
</select>
Checkout my code please.
You can modify your code like this :
<select class="form-control" ng-options="tsk.value for tsk in task.dropdown_values track by tsk.id" ng-model="selectedItem" ng-change="checkvalue(task.id, selectedItem)" style="width:100%;margin-right:4%;">
<option value="">Select</option>
</select>
here is the plnkr : http://plnkr.co/edit/fekkRctRM59ydI6zDnpY?p=preview
or you can use ng-init like as mentioned by #zsong
<select class="form-control" ng-options="tsk.value for tsk in task.dropdown_values track by tsk.id" ng-model="selectedItem" ng-init="selectedItem='YourDefaultValue'" ng-change="checkvalue(task.id, selectedItem)" style="width:100%;margin-right:4%;">
</select>
Or you can look at this
var myApp = angular.module('myApp', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<select id="myselection" ng-init="selectedColors=3" ng-model="selectedColors">
<option value="1">Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
<div>Selected Colors: {{selectedColors }}</div>
</div>
Code for to displays by default Select options
<select ng-model="your model" ng-options="your options">
<option selected="selected" value="">Select options</option>
</select>
Your ngModel is selectedItem, so you have to set selectedItem to the value which you want as default in your controller:
//This sets the default value to the first item in your list
$scope.selectedItem = $scope.task.dropdownvalues[0].value
You should not have an option tag if using an ng-option
utilize ng-model instead as below.
<select class="form-control" ng-options="tsk.value for tsk in task.dropdown_values track by tsk.id" ng-model="selectedItem" ng-change="checkvalue(task.id, selectedItem)" style="width:100%;margin-right:4%;">
in your controller
$scope.selectedItem = dropdown_values[0];
will resolve your issue.
Many times I have spend hours to find out the solution, believe me!
[ 1 ] Select Option with Numbers (Used in Pagination, Page Size Selection)
<select id="select_pagination_pages" ng-model="recordsInPage">
<option value="10" selected>10</option>
<option value="15">15</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="50">50</option>
<option value="75">75</option>
<option value="100">100</option>
<option value="150">150</option>
<option value="200">200</option>
<option value="250">250</option>
</select>
Inside Controller, particular page init function, I have inserted 10 as String.
$scope.recordsInPage = "10".toString();
[ 2 ] Second Select Option is with simple yes or no selection.
<select class="rfc_text" id="select_flag" ng-model="rfc.flag">
<option value="yes" selected>YES</option>
<option value="no">NO</option>
</select>
Inside Controller initialized rfc.flag like -
$scope.rfc.flag = "yes";
[ 3 ] This third one Select Option is special and with tiny scenario, where model will only use last four option values, but the first one is selected by default.
<select id="select_timezone" ng-model="timezone_search">
<option value="" selected>Search Entire</option>
<option value="CountryCode">Country Code</option>
<option value="CountryName">Country Name</option>
<option value="TimeZone">Time Zone</option>
<option value="TimeOffset">Time Offset</option>
</select>
Inside page controller init -
$scope.timezone_search = "";
I think three examples would be enough for peoples. :D

HTML website display option

I am a beginner in HTML programming and I have the following question.
Im working on a simple try-out.
I have following selection menu:
<p>Kies de frisdrank:</p>
<select id="frisdrank">
<option value="Cola"> Cola </option>
<option value="Fanta"> Fanta </option>
<option value="spuitwater"> spuitwater </option>
<option value="chocolademelk"> chocolademelk </option>
</select>
I also have a button:
<input id="OK" type="button" value="OK">
Now how do I display a text somewhere or a label that says what option is selected when I press the button? I understand this is very basic but still I cant handle to do this.
** UPDATE!!! **
Thanks everyone already for the help! Now I figured out how to do this.
Here is my followup question :
Can I add another textfield with a matching price? Like if you select Cola then the price is for example 20. And If you select fanta the price is 25?
I figured out the javascript. I already have a little bit experience with normal Java.
Thanks for helping me out!
I suggest you to try jQuery:
$("#OK").click(function() {
$("#value").text($("#frisdrank").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>Kies de frisdrank:</p>
<select id="frisdrank">
<option value="Cola"> Cola </option>
<option value="Fanta"> Fanta </option>
<option value="spuitwater"> spuitwater </option>
<option value="chocolademelk"> chocolademelk </option>
</select>
<input id="OK" type="button" value="OK">
<span id="value"></span>
just to explain
1. onclick= to attach a onClick event to your button and it will run the function inside of onClick, this case myFunction.
2. use getElementById to get the element you want
3. use .value to get the value of the selected option
4. you can use that value whatever you want. use innerHTML to place in body.
function myFunction() {
var selectElement = document.getElementById('selectId');
var selectValue = selectElement.value;
alert(selectValue);
}
<select id='selectId'>
<option>1</option>
<option>2</option>
</select>
<button id='buttonId' onclick='myFunction();'>click</button>
function a()
{
var obj = document.getElementById('frisdrank');
document.getElementById('selected').innerHTML = obj.options[obj.selectedIndex].innerHTML;
}
<p>Kies de frisdrank:</p>
<select id="frisdrank">
<option value="Cola"> Cola </option>
<option value="Fanta"> Fanta </option>
<option value="spuitwater"> spuitwater </option>
<option value="chocolademelk"> chocolademelk </option>
</select>
<input id="OK" type="button" value="OK" onclick="a();">
<br><span id="selected">hi</span>
You can have price associated as follow:
JavaScript code:
$("#OK").click(function() {
Var comboValue = $("#frisdrank").val();
$("#value").text(comboValue);
If(comboValue == "Cola")
$("#price").text("10");
Else If(comboValue == "Fanta")
$("#price").text("12");
. . . . . .
});
HTML code will looks like this:
<script src="https:// ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>Kies de frisdrank:</p>
<select id="frisdrank">
<option value="Cola"> Cola </option>
<option value="Fanta"> Fanta </option>
<option value="spuitwater"> spuitwater </option>
<option value="chocolademelk"> chocolademelk </option>
</select>
<input id="OK" type="button" value="OK">
Selected Drink: <span id="value"></span> </br>
Price:<span id="price"></span>
Simply you can have an element on HTML and on some event you can change value of that element or even you can create new elements dynamically using javascript.
try this
<p>Kies de frisdrank:</p>
<select id="frisdrank">
<option value="Cola">Cola</option>
<option value="Fanta">Fanta</option>
<option value="spuitwater">spuitwater</option>
<option value="chocolademelk">chocolademelk</option>
</select>
<input id="OK" type="button" value="OK" onclick="foo()">
<div id="frisdrankSelected"></div>
<script>
function foo() {
var e = document.getElementById("frisdrank");
var strUser = e.options[e.selectedIndex].value;
document.getElementById("frisdrankSelected").innerHTML = strUser;
}
</script>
the function foo will replace the content of the div with id frisdrankSelected with the text selected from the dropdown
here the jsfiddle to test it: https://jsfiddle.net/m4mphbgc/
You can also use PHP.
JavaScript will run on the computer and PHP will run on the server. If you don't want the user to read your code; don't use JavaScript..
Example with PHP:
<form method="POST">
<select id="frisdrank" name="selection">
<option value="Cola"> Cola </option>
<option value="Fanta"> Fanta </option>
<option value="spuitwater"> spuitwater </option>
<option value="chocolademelk"> chocolademelk </option>
</select>
<input id="OK" type="submit" value="OK">
</form>
<?php
if(isset($_POST['selection'])){
echo "You have selected".$_POST['selection'];
}
?>
(echo will print out the result and $_POST is a variable)
To get PHP working on your computer, you will need to create a local server (or you can upload the code to a server).
Please compare the languages Read here