基于 Laravel 中所选选项的表单操作中的动态路由路径
Dynamic route path in form action based on the selected option in Laravel
我在 laravel 5.4 视图中有这样的表格:
<form action="#" method="POST" class="form-inline" role="form">
{{ csrf_field() }}
<div class="form-group">
<select id="tdcategory" class="selectpicker show-tick show-menu-arrow" onchange="this.form.submit()">
@foreach($categories as $category)
<option value="{{ $category->id }}">{{ $category->name }}</option>
@endforeach
</select>
</div>
<div class="form-group">
<select id="tdlocation" class="selectpicker show-tick show-menu-arrow" onchange="this.form.submit()">
@foreach($locations as $location)
<option value="{{ $location->id }}">{{ $location->name }}</option>
@endforeach
</select>
</div>
</form>
我有两个问题:
1) 如何将表单操作动态设置为类似
categories/{category->id}/locations/{location->id}
其中,category->id 和 location->id 都将基于用户当前拥有的选项的值 selected
2) 由于表单是在用户更改选项时提交的,因此页面会重新加载并重置两个 <select>
标记。我如何跟踪之前 selected 的选项,并且在页面加载时,我可以向用户显示在提交表单之前 he/she select 哪个选项?
1) 你可以通过 JS 来实现:从 select 中删除 "onchange" 属性,并添加初始代码,如下所示:
$('#tdcategory,#tdlocation').change(function(){
var category = $('#tdcategory').val();
var location = $('#tdlocation').val();
if (category && location) {
$(this).closest('form')
.attr('action', '/categories/'+ category +'/locations/' + location)
.submit();
}
});
2) 您可以从请求中获取提交的值,并添加一个条件,用于将 selected="selected" 属性插入到每个 select 中,如下所示:
<select id="tdcategory" name="tdcategory" class="selectpicker show-tick show-menu-arrow">
@foreach($categories as $category)
<option value="{{ $category->id }}" @if($category->id == request()->get('tdcategory'))selected="selected"@endif>{{ $category->name }}</option>
@endforeach
</select>
<select id="tdlocation" name="tdlocation" class="selectpicker show-tick show-menu-arrow">
@foreach($locations as $location)
<option value="{{ $location->id }}" @if($location->id == request()->get('tdlocation'))selected="selected"@endif>{{ $location->name }}</option>
@endforeach
</select>
我在 laravel 5.4 视图中有这样的表格:
<form action="#" method="POST" class="form-inline" role="form">
{{ csrf_field() }}
<div class="form-group">
<select id="tdcategory" class="selectpicker show-tick show-menu-arrow" onchange="this.form.submit()">
@foreach($categories as $category)
<option value="{{ $category->id }}">{{ $category->name }}</option>
@endforeach
</select>
</div>
<div class="form-group">
<select id="tdlocation" class="selectpicker show-tick show-menu-arrow" onchange="this.form.submit()">
@foreach($locations as $location)
<option value="{{ $location->id }}">{{ $location->name }}</option>
@endforeach
</select>
</div>
</form>
我有两个问题:
1) 如何将表单操作动态设置为类似
categories/{category->id}/locations/{location->id}
其中,category->id 和 location->id 都将基于用户当前拥有的选项的值 selected
2) 由于表单是在用户更改选项时提交的,因此页面会重新加载并重置两个 <select>
标记。我如何跟踪之前 selected 的选项,并且在页面加载时,我可以向用户显示在提交表单之前 he/she select 哪个选项?
1) 你可以通过 JS 来实现:从 select 中删除 "onchange" 属性,并添加初始代码,如下所示:
$('#tdcategory,#tdlocation').change(function(){
var category = $('#tdcategory').val();
var location = $('#tdlocation').val();
if (category && location) {
$(this).closest('form')
.attr('action', '/categories/'+ category +'/locations/' + location)
.submit();
}
});
2) 您可以从请求中获取提交的值,并添加一个条件,用于将 selected="selected" 属性插入到每个 select 中,如下所示:
<select id="tdcategory" name="tdcategory" class="selectpicker show-tick show-menu-arrow">
@foreach($categories as $category)
<option value="{{ $category->id }}" @if($category->id == request()->get('tdcategory'))selected="selected"@endif>{{ $category->name }}</option>
@endforeach
</select>
<select id="tdlocation" name="tdlocation" class="selectpicker show-tick show-menu-arrow">
@foreach($locations as $location)
<option value="{{ $location->id }}" @if($location->id == request()->get('tdlocation'))selected="selected"@endif>{{ $location->name }}</option>
@endforeach
</select>