Put name attribute of all checked checkboxes into array - JavaScript

Question

I have a pizza ordering form that contains checkboxes for toppings. Each new Pizza is an object that is placed into an array. One of the variables inside the pizza object is toppings. I would like the toppingsvariable to contain an array of all the checkboxes name attribute. How do I do that?

I have made an attempt, but it doesn't seem to work:

HTML:

<fieldset>
<form class="pure-form">
<legend>
<center><label><b>Name: &nbsp;</b></label>
<select class="nameSelection" name="nameSelectionPizza">
    <option value="0">Please Select:</option>
</select></center>
</legend>
<br>
<label><b>Pizza Type: &nbsp;</b></label>
<select class="pizza" name="firstMenu" disabled>
    <option data-price="0">Please Select:</option>
    <option name="margarita">Margarita</option>
    <option name="deep-pan">Deep Pan</option>
    <option name="stuffed-crust">Stuffed Crust</option>
</select>
    <span style="float:right">
    <label><b>Pizza Size: &nbsp;</b></label>
    <select class="pizzaSize" disabled>
        <option data-price="0">Please Select:</option>
        <option name="e-small" data-price="4.99">Extra Small - £4.99</option>
        <option name="small" data-price="5.99">Small - £5.99</option>
        <option name="medium" data-price="6.99">Medium - £6.99</option>
        <option name="large" data-price="8.99">Large - £8.99</option>
        <option name="e-large" data-price="9.99">Extra Large - £9.99</option>
        <option name="f-size" data-price="10.99">Family Size - £10.99</option>
    </select>
    </span>
</form>
</fieldset>
<fieldset style = "border-top:0px">
<form class="pure-form">
<legend><b>Toppings (99p Each): &nbsp;</b></legend>
<input type="checkbox" class="toppings" name="onions" disabled>Onions</input>
<input type="checkbox" class="toppings" name="mushrooms" disabled>Mushrooms</input>
<input type="checkbox" class="toppings" name="peppers" disabled>Peppers</input>
<input type="checkbox" class="toppings" name="olives" disabled>Olives</input>
<input type="checkbox" class="toppings" name="garlic" disabled> Garlic</input>
<input type="checkbox" class="toppings" name="peperoni" disabled>Peperoni</input>
<input type="checkbox" class="toppings" name="cheese" disabled>Pesto</input>
</form>
</fieldset>

JS:

var pizzaArray = new Array();

function pizza(number, pizzaCost, toppingCost, name, pizzaType, pizzaSize, toppings) {
    this.pizzaNumber = number;
    this.pizzaCost = pizzaCost;
    this.toppingCost = toppingCost;
    this.name = name;
    this.type = pizzaType;
    this.size = pizzaSize;
    this.toppings = toppings;
}

var pizzaCounter = 1;

pizzaArray.push(new pizza(pizzaCounter, 0.00, 0.00, "", "", "", ""));

$(document).on("change","input[type='checkbox']", function() {
    var topArray = $(":checkbox:checked").next('name').map(function(){
         return $(this).attr('name');
     }).get();
    var checked = $(this).parent().find(":checkbox:checked").length;
    var toppingCost = (0.99 * checked);
    var form = $(this).closest('div').attr("id");
    var formID = form.replace( /^\D+/g, '');
    for(var i = 0; i < pizzaArray.length; i++) {
        if (pizzaArray[i].pizzaNumber == formID) {
            pizzaArray[i].toppingCost = toppingCost;
            pizzaArray[i].toppings = topArray;
            alert((pizzaArray[i].toppings).toString());
            calculateCost();
        }
    }
});

I think you just need to remove the .next('name') part of your map() line. — Cᴏʀʏ
– Cᴏʀʏ, Commented Dec 28, 2015 at 16:36

Rory McCrossan · Accepted Answer · 2015-12-28 16:37:02Z

2

The error is in your use of next('name'). Remove that and your code should work fine:

var topArray = $(".toppings:checked").map(function(){
    return this.name;
}).get();

Note that I changed the selector to use the class of the checkboxes to save any issues if you add further checkboxes to the page in future. I also used the name property directly from the DOMElement to save creating a needless jQuery object.

answered Dec 28, 2015 at 16:37

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

roland Over a year ago

.get() allows you to return an JS array, which seems to be identical to .toArray(). I didn't know it :)

Collectives™ on Stack Overflow

Put name attribute of all checked checkboxes into array - JavaScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related