I have been trying to populate the checkbox values into corresponding modal divs based on button clicks, but I am facing difficulties in achieving it.
Desired outcome: The buttons should trigger the display of selected checkbox values in their respective modal divs.
Thank you for your assistance.
$(document).ready(function(){
var favorite = [];
$.each($("input[name='sport']:checked"), function() {
favorite.push($(this).val());
});
$("button1").click(function() {
$("#myModal").modal('show').on('shown.bs.modal', function() {
$("#checkid").html("I play these games " +"<br>" + favorite.join("<br>"));
});
});
$("button2").click(function() {
$("#myModal2").modal('show').on('shown.bs.modal', function() {
$("#checkid").html("I dont Play these games " +"<br>" + favorite.join("<br>"));
});
});
});<div id="myModal1" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
These are the games that I usually play and excel at:<br>
<p id="checkid"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="myModal2" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
These are the games that I don't usually play but would like to try:<br>
<p id="checkid"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<form>
<h3>Select your favorite sports:</h3>
<label>
<input type="checkbox" value="football" name="sport"> Football</label>
<label>
<input type="checkbox" ; value="baseball" name="sport"> Baseball</label>
<label>
<input type="checkbox" value="cricket" name="sport"> Cricket</label>
<label>
<input type="checkbox" value="boxing" name="sport"> Boxing</label>
<label>
<input type="checkbox" value="racing" name="sport"> Racing</label>
<label>
<input type="checkbox" value="swimming" name="sport"> Swimming</label>
<br>
<button type="button">Get Values</button>
</form>
<button id = "button1" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" >I play these games</button>
<button id = "button2" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">I dont play these games</button>