I have this site with a form in it. Here I ask the user for their language skills.
First I built it like a list:
<div class="col-md-3">
<ul class="list-unstyled" id="request_profile_languages">
#isset($requestProfile)
#foreach($requestProfile->languages as $index=>$requestProfileLanguage)
<li>
<select {{ (FALSE == $canEdit) ? 'readonly':'' }} class="form-control form-select" id="{{ 'request_profile_language_'.$index }}" name="{{ 'request_profile_language_'.$index }}" placeholder="Language">
#foreach($languages as $r=>$language)
<option {{ ($language->name == $requestProfileLanguage->language->name) ? 'selected':'' }} value="{{ $language->value }}" >{{ $language->name }}</option>
#endforeach
</select>
</li>
#endforeach
#else
<li>
<select {{ (FALSE == $canEdit) ? 'readonly':'' }} class="form-control form-select" id="request_profile_language_0" name="request_profile_language_0" placeholder="Language">
#foreach($languages as $r=>$language)
<option {{ ($language->name == 'English') ? 'selected':'' }} value="{{ $language->value }}" >{{ $language->name }}</option>
#endforeach
</select>
</li>
#endisset
</ul>
</div>
There are more divs with language level and language remove.
The problem is on site, when I minimize the browser, it looks like this:
Language List
I want a table replacing this list. What am I supposed to do?
Well, you have your list in a .col-md-3 div. If you change it to a .col-xs-something and put the x's in a .column-xs beside it, then they should still match up. I'm assuming that's how it is on larger devices since you didn't post the html for the x's?
Related
I am creating a blog in Laravel. I have two tables - posts and categories.
When i want to edit one post, i have a problem with categories. My post controller is sending categories to the view, i can see them while editing, but i don't know how to set the current category in the select option.
The tables are conected:
public function posts(){
return $this->hasMany('App\Post');
}
public function category(){
return $this->belongsTo('App\Category');
}
Controller:
public function edit(Post $post)
{
$categories = Category::all();
return view('admin.posts.edit', compact('post'))->withCategories($categories);
}
View:
<form action="{{ route('posts.update', ["post" => $post->id]) }}" method="post" enctype="multipart/form-data" class="form-horizontal">
#csrf
<div class="form-body">
<div class="form-group">
<label class="col-md-3 control-label">Naslov</label>
<div class="col-md-4">
<input type="text" name='title' value='{{ old("title", $post->title) }}' class="form-control">
#if($errors->has('title'))
<div class='text text-danger'>
{{ $errors->first('title') }}
</div>
#endif
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Kategorija</label>
<div class="col-md-4">
<select class="form-control" name="category_id">
#if(count($categories) > 0)
#foreach($categories as $category)
<option value="{{ $category->id }}">{{ $category->name }}</option>
#endforeach
#endif
</select>
#if($errors->has('category_id'))
<div class='text text-danger'>
{{ $errors->first('category_id') }}
</div>
#endif
</div>
</div>
How can i make the category display the current category of the selected post in the option select like i have for title? value='{{ old("title", $post->title) }}'
To show the currently associated Category, you can set a default "selected" option based on the $post->category_id:
<option value="{{ $category->id }}" {{ old('category_id', $post->category_id) == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
This a simple ternary that sets the selected attribute of one of the options based on the old() value, or, if old() is not set, then based on the value of $post->category_id
What you are looking for is the selected property of the <option> element.
#forelse ($categories as $category)
<option value="{{ $category->id }}" {{ $category->id == old('category_id', $post->category_id) ? 'selected' : '' }}>
{{ $category->name }}
</option>
#endforelse
A minor change as well in the in you blade template to make use of the #forelse directive for less code.
You could also change your controller code a bit:
return view('admin.posts.edit', compact('post', 'categories'));
Further the laravelcollective/html package might help you a lot in creating forms.
I have database with types such as:
Entertainment & Food,
Health & Care
etc.
I insert it into a dropdown like this:
<div class="form-group{{ $errors->has('type') ? ' has-error' : '' }}">
<div class="type_message form-control alert-warning" style="display: none;"></div>
<label id="type2" for="type" class="col-md-4 control-label">Type</label>
<div class="col-md-6">
<select class="form-control" name="type" id="type">
<option selected value="{{ $entity->type }}">{{ $entity->type }}</option>
#foreach ($entities as $entity_select)
<option value={{ $entity_select->type}}>{{ $entity_select->type }}</option>
#endforeach
</select>
#if ($errors->has('type'))
<span class="help-block">
<strong>{{ $errors->first('type') }}</strong>
</span>
#endif
</div>
</div>
The problem is that when I check the value of the field it looks like this:
<option value="Entertainment & Nightlife" selected="">Entertainment & Nightlife</option>
Therefore in the database it only adds "Entertainment" how can I avoid that?
<option value="{!! $entity_select->type !!}">{!! $entity_select->type !!}</option>
https://laravel.com/docs/5.4/blade#displaying-data
As mentionned in the documentation :
Be very careful when echoing content that is supplied by users of your
application. Always use the escaped, double curly brace syntax to
prevent XSS attacks when displaying user supplied data.
I'm currently working on an edit page. My edit perfectly shows the old (product name) input value, like so:
<div class="form-group">
<label for="product-input">#lang('product.name')</label>
<input id="product-input" type="text" name="name" class="form-control" value="{{ isset($product) ? $product->name : '' }}">
</div>
My question is, how can I do this with a select? How can I get the old selected option value when editing?
My code:
<div class="form-group">
<label>#lang('product.group')</label>
<select name="product_group_id" id="product_group_id" class="form-control" ng-model="productGroup" ng-change="changedType(val)">
<option style="display: none" value="">#lang('product.choose_group')</option>
#foreach ($product_groups as $product_group)
<option value="{{$product_group->id}}">{{$product_group->name}}</option>
#endforeach
</select>
</div>
Solution:
Added ng-selected to the option element, like so:
#foreach ($product_groups as $product_group)
<option value="{{$product_group->id}}" ng-selected="{{ isset($product->product_group_id) ? $product->product_group_id == $product_group->id : ''}}">{{$product_group->name}}</option>
#endforeach
You need to check if the old value equals option value and then use selected attribute:
#foreach ($product_groups as $product_group)
<option #if(old('product_group_id') == $product_group->id) selected #endif value="{{$product_group->id}}">{{$product_group->name}}</option>
#endforeach
Even better considering the first time with default value:
<option
value="{{$product_group->id}}"
{{ old('product_group_id', $product->id) != $product_group->id?: 'selected' }}>
{{$product_group->name}}
</option>
Trying to improve the code of my app and just migrated to L5. I used to call models in my views and I know this is not best practice - I should separate data calling and views completely.
However how do you deal with a situation like this:
<div class="field">
<label for="country">Country<sup>*</sup></label>
<select class="" id="country" name="country">
<option value="{{{ old('country') ? old('country') : '' }}}">{{{ old('country') ? App\Country::find(old('country'))->country_name : '' }}}</option>
#foreach ($countries as $studio_country)
<option value="{{ e($studio_country->id) }}">{{ e($studio_country->country_name) }}</option>
#endforeach
</select>
#if ($errors->has('country'))
<div class="alert alert-warning" role="alert">
{{ $errors->first('country') }}
</div>
#endif
<br>
</div>
Basically if there is an input and the input did not pass the validation the page refreshes with the old input and the error message. I need to extract the name of the country from the DB since I only have its ID.
You would want to do something like this:
<select id="country" name="country">
#foreach ($countries as $studio_country)
<option
value="{{ $studio_country->id }}"
{{ $studio_country->id === old('country') ? 'selected' : '' }}>
{{ $studio_country->country_name }}
</option>
#endforeach
</select>
I have two arrays of objects and I want to check if ids of elements of both are the same then select option in select box otherwise just display it. I tried like this:
<select multiple class="form-control" name="category_id[]">
#foreach($mysliwski as $mysl)
#if(!$product->categories->isEmpty())
#foreach($product->categories as $cat)
#if($mysl->id == $cat->id)
<option selected value="{{$mysl->id}}">{{$mysl->name}}</option>
#else
<option value="{{$mysl->id}}">{{$mysl->name}}</option>
#endif
#endforeach
#else
<option value="{{$mysl->id}}">{{$mysl->name}}</option>
#endif
#endforeach
</select>
But it works only when one category is the same. When there are more my select option are duplicated.
Here are my two
arrays. Where I have bug?
You could achieve that like this
<select multiple class="form-control" name="category_id[]">
#foreach($mysliwski as $mysl)
#if(!$product->categories->isEmpty())
{{-- */$selected='';/* --}}
#foreach($product->categories as $cat)
#if($mysl->id == $cat->id)
{{-- */$selected='selected';/* --}}
#endif
#endforeach
<option {{ $selected }} value="{{$mysl->id}}">{{$mysl->name}}</option>
#else
<option value="{{$mysl->id}}">{{$mysl->name}}</option>
#endif
#endforeach
</select>
Note: {{-- */$selected='';/* --}} is a tricky way of declaring a variable in a blade template. See https://stackoverflow.com/a/17176876/170539