Create multidimentional array with dynamic form jquery

Question

I have the following form, and I am dynamically adding more dropdowns (exactly the same as these) if the user clicks on the link to add more items

<div class="dynamic-sale">
      <select name="sizes[]" id="sizes" class="entry-dropdown">
        <option value="3XL">3XL</option>
        <option value="2XL">2XL</option>
        <option value="XL">XL</option>
        <option value="L">L</option>
        <option value="M">M</option>
        <option value="YL">YL</option>
        <option value="YM">YM</option>
      </select> 
   <select name="number[]" id="amount" class="entry-dropdown">
        <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>
   <select name="price[]" id="price" class="entry-dropdown">
        <option value="15">$15</option>
        <option value="12.5">$12.5</option>
        <option value="10">$10</option>
        <option value="0">Free</option>
   </select>
 </div>

My question I have is, I want to take the results and have them in a format where I can add everything up.

so it'll say how many sizes of each I have, how many of each size, and the price. I'm assuming i need a multidimentional array.

I currently have:

 $('#order-submit').click(function(){

var size = [];
var price = [];
var quantity = []; 

$.each($('.entry-dropdown'), function() {

    size.push($(this).val());


});
  console.log(size);

But all this give me was a single array: ["XL", "3", "15", "3XL", "1", "15"] (when I tested it)

What would be the best way to get that data in a useable format?

I hope that makes sense! Thanks

Rob W · Accepted Answer · 2011-12-16 20:13:44Z

2

You have to loop through each dynamic-sale element. Then, loop through the children, and add the values to a sub-array.

var result = [];                               // <-- Main array
$(".dynamic-sale").each(function(){
    var individual_result = [];                // <-- "sub"-array
    $(this).find("select").each(function(){
        individual_result.push($(this).val());
    })
    result.push(individual_result);            // <-- Add "sub" array to results
});

This method returns an array, consisting of an array with size, price and quantity.

If you want to put these values in a separate array, use:

var size = [],
    price = [],
    quantity = [];
$(".dynamic-sale").each(function(){
    var selects = $(this).find("select");
    size.push(selects.eq(0).val());
    price.push(selects.eq(1).val());
    quantity.push(selects.eq(2).val());
});

edited Dec 16, 2011 at 20:13

answered Dec 16, 2011 at 20:08

Rob W

350k87 gold badges811 silver badges683 bronze badges

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

1 Comment

Bill Over a year ago

That's what I was looking for. That makes a lot of sense now. Thanks!

jabclab · Accepted Answer · 2011-12-16 20:15:27Z

2

It's a little different but something like this might be an idea:

var data = [];

$("#order-submit").click(function () {
    $(".dynamic-sale").each(function () {
        var $saleDiv = $(this);
        data.push({
            size: $saleDiv.children(".size-dropdown").val(),
            amount: window.parseInt($saleDiv.children(".amount-dropdown").val(), 10),
            price: window.parseFloat($saleDiv.children(".price-dropdown").val())
        });    
    });
});

You would then end up with an Array of Objects, each representing a row in your table, something like:

[
    {size: "3XL", amount: 1, price: 0},
    {size: "M", amount: 7, price: 12.5}
    ...
]

answered Dec 16, 2011 at 20:15

jabclab

15.1k5 gold badges57 silver badges51 bronze badges

Collectives™ on Stack Overflow

Create multidimentional array with dynamic form jquery

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related