I am new to laravel so excuse me if this is a stupid / obvious question - I will remove if so...
i have a drop down list which displays a variety of flavours for an item all sourced from the database. I have this part working fine, however what I want is when you select a flavour, this then displays below the nutritional information for that flavour and changes when you change the flavour.
This is the select in the blade:
<select name="" id="">
#foreach($flavours as $flavour)
<option>{{ $flavour['name'] }}</option>
#endforeach
</select>
Simple controller function to get data:
function show()
{
$data = Flavours::all();
return view('flavours', ['flavours' => $data]);
}
I have searched online quite alot to find methods / videos which show what I need, however I can not find anything.
There are 2 ways.
1 - you have to get new data via ajax every change select tag value.
2 - If you don't like it, you can get needed data using keyword and full list.
<select name="flavour" id="flavour">
#foreach($flavours as $flavour)
<option value="{{$flavour['id']}}" >{{ $flavour['name'] }}</option>
#endforeach
</select>
$("#flavour").change(function(){
id=$(this).val();
const flavour_list = <?php echo $flavours; ?>;
const goal = flavour_list.find(item => item.id === id);
console.log({goal})
});
Related
I can't figure out on how to put the selected code after it has selected the option.
I am using laravel, but i dont think it has to do with laravel framework...
<select id="idjenisuniform" name="idjenisuniform" style="width: 100%;">
<option value=""></option>
#foreach($idjenisuniform as $g)
<option value="{{$g->id}}" >{{$g->badanuniform}}</option>
#endforeach
</select>
(the idjenisuniform is from the controller, it works), but I just don't know how to do it after it has done choosing from the option.
Example
it chooses police -> the id is 1
I want to make:
if the option from it is 1, then it will display other option to show what group is he in. For example detective.
In conclusion I am trying to make a select option and after it has choose it, it will proceed to the next select option corresponding to the previous id from option.
please help.
Since you are wanting an effect that depends on user interaction, it would be better to use javascript for the effect you want. With php, the choice has to go all the way back to the web server to get processed, then the result is sent all the way back to the browser and the whole web page will refresh as a result. With javacript, everything happens in the browser.
But, you asked for a php solution, so here's the most simple way.
Say the first select element is named "select-one" and the second select element is named "select-two"
Create two forms. Notice that the second form has an ID.
[form action="/url/" method="whatever"]
[form id="other-form" action="/url/" method="post"]
In the main form (the one without an ID), place all your form elements. In addition, place another hidden element with the same name as the first select element ("select-one");
[form]
[input type="hidden" name="select-one"]
... all other elements
[/form]
Now when you add the first select element, give it a new attribute so that it is associated with "other-form" instead of the main form. Also, give it an ID.
[select id="select1" name="select-one" form="other-form"]
You DO have to add a bit of javascript, but it's not much. If you don't have any other javascript set up, just put this at the bottom of the web page, just above the [/body] tag.
[script]
const select1 = document.querySelector('#select1');
select1.addEventListener('change', (event) => event.target.form.submit());
[/script]
The javascript will submit the form which #select1 is associated with. Since we assigned the element to "other-form", that is the form that will get submitted.
For the php:
I haven't used Laravel in a very verly long time so I'll just give some vanilla php here.
$options_one = ['One', 'Two', 'Three'];
$options_two = [
'One' => ['Foo', 'Bar', 'Baz'],
'Two' => ['Boom', 'Bang', 'Bam'],
'Three' => ['Fee', 'Fie', 'Fo', 'Fum']
];
$select_one = (isset ($_POST['select-one']) ? $_POST['select_one'] : false;
// do some input validation
Now for the forms:
<form id="other-form" method="post" action = ""></form>
<form id="main-form" action="">
<input type="hidden" name="select-one" value="<?php echo $select_one ?>">
<!-- This element is assigned to "other-form" -->
<select form="other-form" name="select-one" id="select1">
<option value="">Select One...</option>
<?php foreach($options_one as $option) {
$option = ($select_one === $option) ? "<option selected>$option</option>" : "<option>$option</option>";
echo $option;
}?>
</select>
<select name="select-two">
<?php
$options = ["The first choice has not been selected"];
if (array_key_exists($select_one, $options_two)) {
$options = $options_two[$select_one];
}
foreach ($options as $option) {
echo "<option>$option</option>";
}
?>
</select>
<!-- other inputs in your form -->
</form>
To begin with, I am an absolute beginner in front-end development, thus please excuse me if the question is too elementary.
The project I am working on, a drop-down list has been defined as:
<div ng-controller="FacetController">
<div class="spnlocationdrop-container" ng-hide="isservicelocal">
<select class="spnlocationdrop" ng-model="$parent.locationsearch" ng-options="location for location in locations | sortArray ">
<option value="">All Cities</option>
</select>
</div>
</div>
The list contains cities, out-of which the user has to select one. The value has to be stored, and sent to the backend via an AJAX call.
How do I get the selected value? Until now, I've been doing that using the document.getElementByID().value() function, but since the above list contains no ID, how do I get the value?
ng-model will have the value of the option selected.
Here's a simple working example: Plunker
In my example, data.singleSelect has the value you need so I'm able to output that to the view using {{ data.singleSelect }} though if I wanted to access it in my controller I would do var input = $scope.data.singleSelect and then pass that input variable to the backend via an AJAX call.
I am new to Laravel.
I need to populate one select control based on the previous select option that a user selects.
Here is my blade/html(first select is hard coded for now, but the values are what will come from database)
<select id="company_type" name="company_type"class="form-control">
<option value="2">Dealer</option>
<option value="3">Customer</option>
<option value="4">Partner</option>
</select>
<select id="organization_type_id" name="organization_type_id"class="form-control">
#foreach($belongsto as $org)
<option>{{ $org }}</option>
#endforeach
</select>
Here is my javascript
$('#company_type').on('change', function(e){
console.log(e);
var company_type = e.target.value;
$.get("{{ url('dashboard/addOrganization') }}?company_type=" + company_type, function(data) {
console.log(data);
$('#organization_type_id').empty();
$.each(data, function(index,subCatObj){
$('#organization_type_id').append('subCatObj.name');
});
});
});
Here is my Controller (This code is part of a function call that I making within the controller I would be returning a view once I get the data I need)
$companyType = '3';// Input::get('comapny_type');
$orgs = Organization::where('organization_type_id','=',$companyType)->get();
return $orgs;
In my controller, I have hard coded an option that I expect to get from Input::get('company_type') However, the Input call returns null.
The parameters are not showing up in my URL so I am assuming that is the reason it is not working. However, I am not sure how to append ?company_type=3 to the URL, if that is how its supposed to be.
I'm attempting to create a dynamic drop down list, but after searching for hours I'm still completely stumped as to how to do it. So I am experimenting with variables in a list. This is the code I've started with.
<body>
<form method = "post">
<select id = "State" onchange = "a = this.options[selectedIndex].value;">
<option value = ""> Select a state</option>
<option value = "S3"> Pennsylvania</option>
<option value = "S4"> California</option>
<option value = "I4"> Texas</option>
<option value = "I5"> New York</option>
</select>
</form>
</body>
my question is what can I do with the variable 'a' so that I could create a dynamic drop down list based off it? One thing I had hoped to do was use an if-statement to display a second list. I wanted to remain on the same page too.
Note: I apologize if this seems like a basic question, but I've been scouring websites for answers and all I've figured out was that I can't send javascript variables to php, otherwise I'd have gotten this done forever ago
try this way
<select id="appamt" name="appamt">
<? while($amt=mysql_fetch_array($amount)){ ?>
<option value="<?=$amt['amount']?>"><?=$amt['amount']?></option>
<? } ?></select>
When your page detects the onchange event, what you need to do is either have all the combinations of options you want readily available but hidden on the page e.g. $('#sub-option1).hide(); and when the value is selected use $('#sub-option1).show();
Secondly you can have a ajax request that returns a JSON value of key=>value pairs, then use these key value pairs to dynamically build another dropdown using jquery .each() function.
Loop through your json values and add them to a previously hidden selector and then display it.
Hope this helps but if not email me and I will skype you through it.
Jim C
I am creating a form, where people can either choose a new team and then input its location or if they select a team from the list, I would like the input to be disabled - and the selected team's location to be given in the input box. This is my code so far. It doesn't work. :(
<select id="chooseTeam" name="chooseTeam" data-placeholder="Select Team">
<option></option>
{% for team in teams %}
<option>{{team.name}}</option>
{% endfor %}
<option>New Team</option>
</select>
<input type="text" id="input_location" name="input_location"/>
In a separate JS File:
$(document).ready(function() {
$('#chooseTeam').on('blur', function() {
if (form.chooseTeam.value != "New Team" && form.chooseTeam.value != "Select Team") {
$("#input_location").html("{{team.location}}");
document.getElementById("input_location").disabled = true;
}
});
});
MINI-UPDATE
Apparently, AJAX is needed for this. I am brand new to Javascript (3 days old) so I don't know how AJAX works yet but I am at this moment googling it to try and figure it out.
Oh, and Merry Christmas, everybody!
"#code-on-christmas"
It seems that you are using Django and jQuery. Is that true? I cannot give you a fully detailed answer at the moment, but the code in the following line cannot work because you are mixing client-side and server-side code.
$("#input_location").html("{{team.location}}");
The expression {{team.location}} cannot be evaluated by Django because it only exists on the client-side in your browser. If you want Django to evaluate what has been chosen on the client-side, you should use AJAX calls between server and client by using $.ajax().
Also, why don't you use jQuery selectors for all of your code? Do something like this:
$(document).ready(function() {
$('#chooseTeam').on('blur', function() {
var currentTeam = $(this).val();
if (!$.inArray(currentTeam, ['New Team', 'Select Team'])) {
$("#input_location").attr('disabled', 'disabled');
}
});
});