Laravel - capture all input names starting with category_id at controller? - laravel-8

In my view I have several category_id inputs.
<select id="category_select1" class="form-control" name="category_id1">
#foreach($category as $c)
<option value="{{$c->id}}">{{$c->name}}</option>
#endforeach
</select>
<select id="category_select2" class="form-control" name="category_id2">
#foreach($category2 as $c)
<option value="{{$c->id}}">{{$c->name}}</option>
#endforeach
</select>
There might be more selectboxes like this so I want to get all of them no mater how many selectboxes there. All the selectbox names will be like category_id1, category_id2.. etc.
$request->input('category_id.*');
But this returns null. What am I doing wrong?

You should use arrays:
#foreach($categories as $i => $category)
<select id="category_select{{$i}}" class="form-control" name="category_id[]">
#foreach($category as $c)
<option value="{{$c->id}}">{{$c->name}}</option>
#endforeach
</select>
#endforeach
and in the controller simply use:
$categories = $request->input('category_id');
foreach($categories as $category_id) {
// ...
}
$request->input('category_id') will be an array of ids
Your solution (different named inputs) is not much reliable.
In any case if you want to use that,
you can use the collections to filter the request inputs by the name to get the categories' ids
Eg.
use Illuminate\Support\Str;
...
$categories = collect($request->all())->filter(function($value, $key) {
return Str::startsWith($key, 'category_id');
})->toArray();

Related

Get value from multiple select dropdown on Yii to be inserted to database

Help I want to get value from a multiple select dropdown from a form to a controller.
Here's my form:
<select multiple="multiple" id="form-field-select-4" class="form-control search-select" name="tim_teknis">
<option value=""> </option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
</select>
And here's my controller:
$tim_teknis = $_POST['tim_teknis'];
It turned out to be showed like this: "tim_teknis" not the value of the dropdown. I hope anyone could understand what I mean. Thank you!
You have to implode the values before insert
May be your form not method is 'POST' , so "tim_teknis" not the value of the dropdown.
Solution:
<form action="submit_form.php" method="POST"><select multiple="multiple" id="form-field-select-4" class="form-control search-select" name="tim_teknis[]"><option value=""> </option><option value="AL">Alabama</option><option value="AK">Alaska</option></select></form><?php if (!empty($_POST['tim_teknis'])) {var_dump($_POST['tim_teknis']);}?>
Result after submit form:
array(2) { [0]=> string(2) "AL" [1]=> string(2) "AK" }

How to bind v-model with select if i have foreach in foreach?

When i alert(this.property_credentials.district) in vue.js i get empty
<select v-model="property_credentials.district" name="district" class="country selectpicker" id="selectCountry" data-size="10" data-show-subtext="true" data-live-search="true">
<option value="0">--Please select your district</option>
#foreach($districts as $district)
<optgroup label="{{$district->district}}">
#foreach($district->regions as $region)
<option value={{ $region}} {{ (old("district") == $region? 'selected':'') }}>{{ $region}}</option>
#endforeach
</optgroup>
#endforeach
How can i pass this value $region to vue.js ?
The syntax of looping is wrong, there is no #foreach in vuejs, you will have to use v-for to loop in the template. It should be something like:
<select v-model="property_credentials.district" name="district" class="country selectpicker" id="selectCountry" data-size="10" data-show-subtext="true" data-live-search="true">
<option value="0">--Please select your district</option>
<div v-for="district in $districts">
<optgroup label="{{district->district}}">
<div v-for="region in district.regions">
<option value={{region}} {{ (old("district") == region? 'selected':'') }}>{{ $region}}</option>
</div>
</optgroup>
</div>
You are mixing two different syntax together, you are using blade code with VueJs. data binding will be wrong.
What you need to do is to bind the value from laravel to a variable that vuejs can consume, something like this
Laravel blade
<script>
// this must be a json value
window.districts = {{$districts}}
</script>
In your VueJS code you need to bind this value to your data array, then you can use it

VueJS bind select to object but still POST string

What is the correct way to bind a select element to an object (rather than a string value) but still have the HTML element submit a string value?
I've managed to get this working, but it almost seems like I'm exploiting a bug:
<select v-model="selected" v-on:change="price=selected.price">
<option v-for="item in items" v-bind:value="item" value="{{ item.id }}">{{ item.name }}</option>
</select>
This works as intended: the "selected" property is attached to the "item" object, but the form POSTs just the item's ID. However, if I reverse the order of the HTML attributes, so that value={{ item.id }} comes before v-bind:value="item", then the form POSTs "[Object]" rather than, e.g., "3".
The fact that it's so fragile makes me think I'm doing something wrong.
So what's the right way to handle this?
I had a similar situation in which I built several vue components that could be used both within a vue component or within a standard form.
<select v-model="selected" v-on:change="price=selected.price">
<option v-for="item in items" :value="JSON.stringify(item)">{{ item.name }}</option>
</select>
Appears to be what you are after. I also had success using a computed property or filter but I decided that stringify was most readable.
I fixed it by using this approach:
<select v-model="product">
<option v-for="obj in choices" :value="obj">{{ obj.name }}</option>
</select>
<input type="hidden" name="product" :value="choice.id">
In summary: don't give your select a name but give that name to your hidden input and provide the ID as value on that element instead.
I see in both the cases, HTML being rendered as following:
<select>
<option value="[object Object]">name1</option>
<option value="[object Object]">name2</option>
<option value="[object Object]">name3</option>
<option value="[object Object]">name4</option>
</select>
Case 1 : v-bind:value="item" value="{{ item.id }}" : fiddle
Case 2 : value="{{ item.id }}" v-bind:value="item" : fiddle
So both the cases are equivalent as far as HTML being rendered. Ideal way to do it without confusion will be just using v-bind:value="item" like following:
<select v-model="selected" v-on:change="price=selected.price">
<option v-for="item in items" v-bind:value="item">{{ item.name }}</option>
</select>
You should v-bind to item or item.id depending on what you want to assign to selected variable.

Get selected option value in change event

I have a dropdown with the following attributes on it:
<select value.bind="row.columns[$parent.$index].colSize" change.delegate="changeColumnSize($parent.$index, $index, row.columns[$parent.$index].colSize)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
But it seems that I cannot pass row.columns[$parent.$index].colSize as an parameter. It is always undefined.
How can I pass the selected value of the dropdown directly to the change events method?
You're missing the value.bind in your select options. I prefer to use mode.bind instead of value.bind though. Try something like this:
<template>
<select value.bind="changedValue" change.delegate="DropdownChanged(changedValue)">
<option model.bind="1">1</option>
<option model.bind="2">2</option>
<option model.bind="3">3</option>
<option model.bind="4">4</option>
</select>
</template>
export class App {
changedValue;
DropdownChanged(changedVal) {
alert(changedVal);
}
}
I'm not sure what you're trying to bind the select to, but basically you want to create a variable that you can bind the selected value too. So, the selected value is going to be set to the variable of changedValue. I like to use model.bind because I can bind true/false values instead of everything being a string.
I've made a running Gist for you to use if needed:
https://gist.run/?id=87f6897928feb504dad638d439caf92f

Vue js recognize selected option

I have cities object which contains city.name and city.id. Also I have cameras object which has city_id: cameras.city_id. In my html:
<div v-for="camera in cameras">
<select v-model="camera.city_id" class="form-control">
<option v-for="city in cities" selected>#{{ city.name }}</option>
</select>
</div>
I have to recognize which element of object should be marked as selected, simply said mark element as selected if city.id == camera.city_id. It will be true only once per loop. How do I manage that? Thanks.
You should be using value on the options like this:
<div v-for="camera in cameras">
<select v-model="camera.city_id" class="form-control">
<option v-for="city in cities" :value="city.id">#{{ city.name }}</option>
</select>
</div>
Done that way, the proper option will automatically be selected for you by the v-model directive.
See this for more information: http://vuejs.org/guide/forms.html#Select