In my laravel project, I have a modal to create an event. Specifically in this modal, there are checkboxes to select which deliviery officer(s) you want to assign to the event. I want it so that you can select one or more of the delivery officers, and if they are selected, their user id gets stored in the amb_applied column in my ‘events’ table. If more than one is selected, I want each id stored and separated by a comma, so for example 3,7,11.
Before adding what I feel should work, I was able to add new events to the database table ‘events’, but now when I submit the modal form, the page just refreshes with no console or laravel log errors and no new record is added to the database. Anyone know why? Thanks
Modal in events.blade.php:
<!-- Add Event Modal -->
<div class="modal fade" id="addEvent" tabindex="-1" role="dialog" aria-labelledby="addEventLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addEventLabel">Add Event</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form method="POST">
@csrf
<div class="form-group">
<label for="event_name">Event Title:</label>
<input type="text" class="form-control" id="a_title" name="event_name" placeholder="Enter title">
</div>
<div class="form-group">
<label for="event_type">Event Type:</label>
<select class="form-control" id="event_type" name="event_type">
<option value="0">--- Select ---</option>
@foreach($event_types as $et)
<option value="{{ $et->id }}">{{ $et->title }}</option>
@endforeach
</select>
</div>
<div class="form-group">
<label for="description">Event Description:</label>
<input type="text" class="form-control" id="a_desc" name="event_info" placeholder="Enter a description">
</div>
<div class="form-group">
<label for="del_officers">Assign Delivery Officer(s):</label><br>
@foreach($users as $u)
@if($u->user_type_id === 2)
<div class="form-check">
<input class="form-check-input" type="checkbox" name="del_officers[]" value="{{ $u->id }}" id="officer{{ $u->id }}">
<label class="form-check-label" for="officer{{ $u->id }}">
{{ $u->first_name }} {{ $u->last_name }}
</label>
</div>
@endif
@endforeach
</div>
<div class="form-group">
<label for="num_amb">Number of Ambassadors:</label>
<input type="text" class="form-control" id="a_num_amb" name="a_num_amb" placeholder="Enter number of ambassadors needed">
</div>
<div class="form-group">
<label for="date">Date:</label>
<input type="date" class="form-control" id="a_date" name="date" placeholder="Select a date">
</div>
<div class="form-group">
<label for="start_time">Start Time:</label>
<input type="time" class="form-control" id="a_start_time" name="start_time" placeholder="Select a start time">
</div>
<div class="form-group">
<label for="end_time">End Time:</label>
<input type="time" class="form-control" id="a_end_time" name="end_time" placeholder="Select an end time">
</div>
<div class="form-group">
<label for="location">Location:</label>
<textarea type="text" class="form-control" rows="4" id="event_loc" placeholder="Enter event location"></textarea>
</div>
<div class="form-group">
<label for="contact_persons">Contact Person:</label>
<input type="text" class="form-control" id="contact_persons" name="contact_persons" placeholder="Enter contact person">
</div>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
Script for modal:
<!-- Script function to show addEvent modal -->
<script>
function addEvent() {
// Show addEvent modal
$('#addEvent').modal('show');
// Add an event listener to the submit button
$('#addEventForm').on('submit', function(e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: '{{ route('addEvent') }}',
data: $(this).serialize(),
success: function(response) {
// Reload the page
location.reload();
},
error: function(response) {
console.log(response);
}
});
});
}
</script>
EventsController function:
public function add(Request $request)
{
$event_types = EventType::all();
// Validate the input
$request->validate([
'event_name' => 'required|max:255',
'event_type' => 'required|exists:event_types,id',
'event_info' => 'required',
'num_amb' => 'required',
'date' => 'required|date',
'start_time' => 'required|date_format:H:i',
'end_time' => 'required|date_format:H:i|after:start_time',
'event_loc' => 'required|max:255',
'contact_persons' => 'required|max:25',
]);
// Create a new event
$event = new Events();
$event->event_name = $request->input('event_name');
$event->event_type_id = $request->input('event_type');
$event->event_info = $request->input('event_info');
$event->num_amb = $request->input('num_amb');
$event->date = $request->input('date');
$event->start_time = $request->input('start_time');
$event->end_time = $request->input('end_time');
$event->location = $request->input('event_loc');
$event->contact_persons = $request->input('contact_persons');
// Store the selected delivery officers in the amb_applied column
$selected_officers = $request->input('del_officers');
if ($selected_officers) {
$event->amb_applied = implode(',', $selected_officers);
}
$event->save();
// Get the newly created event with the event type
$event = Events::join('event_types', 'events.event_type_id', '=', 'event_types.id')
->leftJoin('users', 'events.amb_applied', 'LIKE', DB::raw("CONCAT('%,', users.id, ',%')"))
->where('events.id', $event->id)
->select('events.*', 'event_types.title as event_type_title', 'users.first_name', 'users.last_name')
->first();
// Redirect to the index page with a success message, the list of event types, and the newly created event
return redirect('admin/admin.events/')->with([
'success' => 'Event added successfully!',
'event_types' => $event_types,
'event' => $event,
'users' => $users,
]);
}