Building a multidimensional object of form values using loops

Question

I have this form that calculates the value of the radio button checkbox and quantity. I want to loop the name and value of every checked or selected item into a multidimensional object array. I am using the storeArray function to do this but all i could do was this tab = {Apple: 1, Orange: 2, quantity: 7}

But I want to be able to do something like so.. tab = {name: Apple, value: 1,}{name:Orange, value: 2}{name: quantity, value: 7} . I tried my best, I guess I'm not doing it right.

 function storeArray() { var tab = {}; $('*[data-in="num"]:checked,#quantity').each(function() { tab[$(this).attr('name')] = parseInt($(this).val()); }); console.log(tab); return tab; } function validate(s) { //This is how we check that at least a checkbox is checked /*if($("input:checkbox:not(:checked)").length == $('input[type=checkbox]').length){ $('#totalcost,#checkedcount').val(0); } else {*/ $('#checkedcount').val(s); $('#totalcost').val((parseInt($('#quantity').val()) * s)); $('#totalcount').val($('#quantity').val()); //} } $('*[data-in="num"],#quantity').on('change', function() { var sum = 0; $('[data-in="num"]:checked').each(function() { sum += parseInt($(this).val()); }); validate(sum); myArray = storeArray(); //myArray Object containing all input values //console.log(myArray); //This is how get the quantity for example //console.log(myArray['quantity']); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <div id="CheckBoxList"> <label><input type="checkbox" id='game0' value="1" name="Apple" data-d="b" data-in="num">Apple</label> <label><input type="checkbox" id='game1' value="2" name="Orange" data-d="b" data-in="num">Orange</label> <label><input type="checkbox" id='game2' value="3" name="Pineaple" data-d="b" data-in="num">Pineaple</label> <label><input type="checkbox" id='game3' value="4" name="Lemon" data-d="b" data-in="num">Lemon</label> <label><input type="checkbox" id='game4' value="5" name="Mango" data-d="b" data-in="num">Mango</label> </div> <div id="RadioButtonList"> <label><input type="radio" id='pad' value="6" data-d="b" name="HI" data-in="num">Small Cup</label> <label><input type="radio" id='pad1' value="7" data-d="b" name="HI" data-in="num">Medium Cup</label> <label><input type="radio" id='pad2' value="8" data-d="b" name="HI" data-in="num">Big Cup</label> </div> <div id="SelectOptions"> <select name="quantity" id="quantity" data-d="b"> <option value="0">Select quantity</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> <code id="demo"></code> total cost<input type="text" id="totalcost" value=""> <br>total Checked<input type="text" id="checkedcount" value=""> <br>total boxes<input type="text" id="totalcount" value=""> <!-- partial --> </form>

Answer 1

Try with this code:

function storeArray() {
  var tab = [];

  $('*[data-in="num"]:checked,#quantity').each(function(index) {
    tab[index] = {
         name: $(this).attr('name'),
         value: parseInt($(this).val())
  });

  return tab;
}