I want to get the values of the checkboxes that are checked but I can only get one value to show up. I'm using jQuery to get different types of values. I am also able to get the values of radio buttons, but not all the values of the checked checkboxes. So let's say the user selects Pasta and Ceasar, I would like the user to see Salads selected: Pasta and Ceasar.I just started learning JS so i'm not really sure how to do it.
Thanks!
function summarizePackages() {
//get inside the div that's holding the buttons
var packages = $('.expander-content > .item');
var summary = '';
packages.each(function(index, pkg) {
pkg = $(pkg);
var name = $.trim(pkg.find('h3').text());
var entree = pkg.find('[name^="Entree Item"]:checked');
var salad = pkg.find('[name^="Salad Name"]:checked');
var delivery = pkg.find('[name^="Delivery Time"]:checked');
var hasOrder = pkg.find('input:checked').length > 0;
if (hasOrder) {
summary += 'Name of package: <b>' + name + '</b>';
summary += '<br>';
if (entree.length) {
summary += 'Entree selected: <b>' + entree.val() + '</b>' + '<br>';
}
if (salad.length) {
summary += 'Salads selected: <b>' + salad.val() + '</b>' + '<br>';
}
if (delivery.length) {
summary += 'Delivery selected: <b>' + delivery.val() + '</b>' + '<br>';
}
summary += '--------------------';
summary += '<br>';
}
});
return summary;
}
$('#reviewOrder input').on('change', function() {
var summary = summarizePackages();
$('#output').html(summary);
});
//make sure the user only selects two checkboxes
$(document).ready(function () {
$("input[class='onlyTwo']").change(function () {
var maxAllowed = 2;
var cnt = $("input[class='onlyTwo']:checked").length;
if (cnt > maxAllowed) {
$(this).prop("checked", "");
alert('You can only select ' + maxAllowed + ' salads!');
}
});
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Order Form</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<form id="reviewOrder">
<fieldset>
<legend>Suite Packages</legend>
<h6 class="fieldset_description">Please choose your delivery time for each item.<br> 12 order minimum</h6>
<div class="expander">
<a href="javascript:void(0)" class="expander-trigger expander-hidden">View Suite Packages</a>
<div class="expander-content">
<div class="item">
<h3 class="product-title">FIRST DOWN PACKAGE<small> $15.50ea</small></h3>
<p>Includes: Peanuts and pretzels. Your choice of Mustang Dogs served with mustard, ketchup, white onions, relish and buns, or the Nacho Station served with grilled chicken, jalapenos, olives, onions, guacamole, sour cream and nacho cheese. Your choice of 2 salads from pasta salad, Caesar salad or seasonal fruit salad. Cookie and brownie platter.</p>
<div class="entreesGroup">
<div>
<p>Entrée (Choose One)</p>
<input type="radio" name="Entree Item 1" value="Mustang Hot Dog"> Mustang Hot Dog<br>
<input type="radio" name="Entree Item 1" value="Nacho Station"> Nacho Station<br>
</div>
<div>
<p>Salads (Choose Two)</p>
<input class="onlyTwo" type="checkbox" name="Salad Name 1" value="Ceasar"> Ceasar<br>
<input class="onlyTwo" type="checkbox" name="Salad Name 1" value="Pasta"> Pasta <br>
<input class="onlyTwo" type="checkbox" name="Salad Name 1" value="Seasonal Fruit Salad"> Seasonal Fruit Salad<br>
</div>
<div>
<p>Choose Delivery Time</p>
<input type="radio" name="Delivery Time 1" value="Pre Game">Pre Game<br>
<input type="radio" name="Delivery Time 1" value="Kick Off">Kick Off<br>
<input type="radio" name="Delivery Time 1" value="Half Time">Half Time<br>
</div>
</div>
<p>How many?</p>
<input type="text" name="FIRST DOWN PACKAGE" value="0" maxlength="2" class="qty num-pallets-input" id="FIRST+DOWN+PACKAGE-mvp-num-pallets" style="margin-bottom:0" />
<p class="price-per-pallet"><small>* Price per guest: <span> 15.50</span></small></p>
<div class="row-total">
<input type="text" class="row-total-input" id="FIRST+DOWN+PACKAGE-mvp-row-total" disabled="disabled">
</div>
</div>
<div class="item">
<div>
<h3 class="product-title">FIELD GOAL PACKAGE<small> $20.00ea</small></h3>
<p>Peanuts, pretzels and snack mix. Your choice of Tri-Tip Sandwiches served with creamy horseradish, salsa, BBQ sauce and rolls or the Chili Bar served with red onions, cheddar cheese, sour cream, onion straws and cornbread pieces. Your choice of 2 salads from pasta salad, Caesar salad or seasonal fruit salad.</p>
</div>
<div class="input_grouping_wrap">
<div>
<p>Entrée (Choose One)</p>
<input type="radio" name="Entree Item 2" value="Tri-Tip Sandwiches"> Tri-Tip Sandwiches<br>
<input type="radio" name="Entree Item 2" value="Nacho Station"> Chili Bar<br>
</div>
<div>
<p>Salads (Choose Two)</p>
<input type="checkbox" name="Salad Name 2" value="Pasta"> Pasta<br>
<input type="checkbox" name="Salad Name 2" value="Ceasar"> Ceasar<br>
<input type="checkbox" name="Salad Name 2" value="Seasonal Fruit Salad"> Seasonal Fruit Salad<br>
</div>
<div class="delivery-time">
<p>Choose Delivery Time</p>
<input type="radio" name="Delivery Time 2" value="Pre Game">Pre Game<br>
<input type="radio" name="Delivery Time 2" value="Kick Off">Kick Off<br>
<input type="radio" name="Delivery Time 2" value="Half Time">Half Time<br>
</div>
</div>
<div>
<p>How many?</p>
<input type="text" name="FIELD GOAL PACKAGE" value="0" maxlength="2" class="qty num-pallets-input" id="FIELD+GOAL+PACKAGE-mvp-num-pallets" style="margin-bottom:0" />
<p class="price-per-pallet"><small>* Price per guest: <span> 20.00</span></small></p>
</div>
<div class="row-total">
<input type="text" class="row-total-input" id="FIELD+GOAL+PACKAGE-mvp-row-total" disabled="disabled">
</div>
</div>
</div>
</div>
</fieldset>
</form>
<div id="output"></div>
</body>
</html>
