如何根据模态选择更新输入
How to update inputs based on a modal selection
我目前正在使用Laravel框架。我发送所有记录从一个用户关于事件,但如果用户有一个以上的事件记录,那么他需要选择他想编辑的事件,我已经创建了显示所有事件的模态,但我怎么能获得选定的事件,并填写所有输入与特定的事件?这是我的代码
控制器public function dashboardEvents(){
//Brings all the info from the user events
$data['events'] = UserEvent::where('user_id', Auth::user()->id)->get();
//This is to know if there's more than one record
if(UserEvent::where('user_id', Auth::user()->id)->get()->count()>1) {
$data['multiple'] = true;
} else {
$data['multiple'] = false;
}
return view('user-pages/my-events', $data);
}
视图<title>User Dashboard</title>
<body class="html not-front not-logged-in no-sidebars page-node page-
<!-- Al the Inputs -->
<select class="form-control" style="margin-bottom: 15px;" id="user_roles">
<option value="bride">I am a bride</option>
<option value="groom">Im a groom</option>
<option value="groomsman">Im a guest</option>
<option value="wedding_planner">Im a wedding planner</option>
</select>
<input type="text" class="form-control" style="margin-bottom: 15px;">
<div class="input-group date" data-provide="datepicker" style="margin-bottom: 15px;">
<input type="text" class="form-control">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
<select class="form-control" style="margin-bottom: 15px;" id="party-type">
<option id="wedding">Wedding</option>
<option id="party">Party</option>
<option id="prom">Prom</option>
</select>
<select class="form-control" style="margin-bottom: 15px;" id="user-task">
<option>I am shopping for just Groomsmen</option>
<option>I am shopping for me</option>
</select>
<input type="text" class="form-control" id="phone_number_user" style="margin-bottom: 15px;">
<input type="text" class="form-control" id="usr" style="margin-bottom: 15px;" placeholder="New Password">
模态
<div class="modal fade" id="UserDashboardModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Choose an Event to Edit</h4>
</div>
<div class="modal-body">
<select class="form-control">
@foreach($event as $key=>$cat)
<option value="{{ $cat->user_event_id }}">{{ $cat->name }}</option>
@endforeach
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" id="modalFromEventButton">Select</button>
</div>
</div>
</div>
打开Modal的脚本
<script>
$(document).ready(function () {
$('#UserDashboardModal').modal('show');
});
</script>
如何获取选中的事件?并自动上传输入正确的数据?
我会改变你的查询一点,因为现在你查询userEvents两次。您可以从第一个结果集中获得计数:
控制器:
public function dashboardEvents()
{
// Get all the event ids for the user.
$data['events'] = UserEvent::where('user_id', Auth::user()->id)->get();
// Check count.
$data['multiple'] = $data['events']->count() > 1 ? true : false;
// Return view.
return view('user-pages/my-events', $data);
}
用编辑表单的表单元素来更新你的Blade,该表单的id与你的模式中select下面的userEvent id相对应。
叶片:
<form action="/your/update/route" method="POST">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
@foreach($event as $key => $cat)
<div id="cat-{{ $cat->user_event_id }}" style="display:none">
<!-- build your form elements for update -->
</div>
@endforeach
</form>
用一个选择框事件更新你的脚本,在这个事件中你决定向用户显示哪个表单。
脚本:
$(document).ready(function () {
$('#UserDashboardModal').modal('show');
$('.modal-body select').change(function() {
// Get selected userEventId.
var userEventId = $('.modal-body select option:selected').val();
// Change your form with $('#cat-' + userEventId)
// code...
});
});
最后提示:最好只查询id &名称在仪表板上预填充您的选择(因为用户可能有很多userEvents)。然后在用户使用ajax选择事件的单独调用中获取完整的数据。好运!
相关文章:
- 使用Javascript更新输入框中的文本
- 以字符串形式读取量角器测试中的更新输入
- 如何动态更新输入值属性
- 当html选择/选项发生更改时,需要更新输入字段
- 用于更新输入的 Javascript 被占位符覆盖
- 更新输入类型=文本值或文本框控件调整大小事件
- AngularJS绑定模型以选择更新输入数字字段,最小值为最大值
- 从数据库填充的下拉菜单中更新输入字段
- 如何在拖动行时更新输入值
- 为什么在更新输入类型文本的值时,敲除不更改值属性
- 使用javascript将span更改为input(viceversa),然后AJAX更新输入
- 按键更新输入落后1步
- NG模型仅在使用谷歌地图自动完成时单击后更新输入
- Javascript更新输入字段(将光标放在输入中)
- 更新输入类型时间的值(重新渲染)并使用 React 再次关注元素
- Twitter TypeAhead.js不更新输入
- 主干更新输入创建新行
- 使用 href Jquery 的值更新输入
- 获取 IFrame 源,然后更新输入文本框
- 自动建议反应.js组件不会在渲染时更新输入样式