For a coding boot camp assignment, I'm working on a modal that includes options for the days of the week.
My approach involves using Jquery .each and CSS :checked to retrieve the values assigned to each input. However, every time I attempt to log the array I'm pushing to, it returns empty.
This is my first post on StackOverflow, and I'm very new to coding, so please bear with me :)
I apologize for any syntax or formatting errors as I've only been coding for about 1.5 months.
I've tried assigning different IDs to each checkbox and then pulling the values one by one into an array. I also attempted giving them all the same name to utilize the CSS checked feature in combination with .each but neither method seemed to work.
// Below is the checkbox section of the modal //
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Monday">
<label for="Monday">Monday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Tuesday">
<label for="Tuesday">Tuesday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Wednesday">
<label for="Wednesday">Wednesday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Thursday">
<label for="Thursday">Thursday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Friday">
<label for="Friday">Friday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Saturday">
<label for="Saturday">Saturday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Sunday">
<label for="Sunday">Sunday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Weekday">
<label for="Weekday">Weekday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Weekend">
<label for="Weekend">Weekend</label>
</div>
// Here is where the attempt to call back the values of the checked boxes is made //
$("#submitButton").on("click", function () {
event.preventDefault();
var daysOfWeek = [];
$.each($("input[name='dayOfWeek']:checked"), function(){
daysOfWeek.push($(this).val());
});
console.log(daysOfWeek)
});
I am hoping to receive an array containing the values (set of strings) entered for each checkbox option and be able to store and console.log it. Currently, I'm only receiving an empty array.