foreach input multidimensional array

Question

I have the following html

<input type="checkbox" name="array[0][count]" value="1"/>
<input type="hidden" data-price="50" name="array[0][id]" value="1"/>

<input type="checkbox" name="array[1][count]" value="5"/>
<input type="hidden" data-price="20" name="array[1][id]" value="2"/>

.....

I want to calculate the sum of data-price using jQuery with the formula

foreach extra {
    price += extra[id][data-price] * extra[count]
}

//not actual code, just a representation of the result needed

So far I was able to collect all the inputs using

$('input[name^="array"]').each(function() {
    console.log($(this));
});

But I have no idea how to proceed further. Any help appreciated. If you can point me to a better way to structure the html array, I'm ok with that.

You want to calculate the sum of data-price: how? I am asking because there seems to be a relationship between each checkbox and the adjacent hidden input holding the data-price. So do you want to calculate the sum of data-price of all checked checkboxes or just simply all the checkboxes: irrespective of whether any is checked or not? — Poiz
– Poiz, Commented May 7, 2016 at 0:37
I know how to check whether a checkbox is checked or not, but yes, I want to calculate the sum of all :checked inputs, each multiplied by the corresponding count — mariobgr
– mariobgr, Commented May 7, 2016 at 0:48

Polynomial Proton · Accepted Answer · 2016-05-07 01:10:51Z

2

You are very close. All you need to do is get the price from the attribute now.

$(this).attr("data-price");

I noticed not all 'input[name^="array"]' have data attribute, so you need to check if it exists before adding or just rename the ones with the actual data attribute.

Below code works fine

$('input[name^="array"]').each(function() {

var dPrice =$(this).attr("data-price");
if(dPrice){ //check if data-price exists for the input
  price+= parseInt($(this).attr("data-price"),10);
  }
});

Here's a working fiddle

Once you have the attribute, apply your formula and voila! You're done

UPDATE from comments:

While creating the checkbox from array, you do something like

<input type="hidden" data-price="50" name="array[0][id]" data-quantity=[count] value="1"/>

and then use the above code and get the data-quantity attribute and use it in your formula

edited May 7, 2016 at 1:10

answered May 7, 2016 at 0:37

Polynomial Proton

5,18023 silver badges37 bronze badges

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

5 Comments

mariobgr Over a year ago

Thanks for your answer. I know how to get the attribute, the question is how to get the multiplayer (count) corresponding to that price?

Polynomial Proton Over a year ago

Oh, sorry I misunderstood the question. Do you have any restriction with data attributes? I would make a new data attribute data-quantity and use that? Does that work for you?

mariobgr Over a year ago

I'm completely free to change the HTML as best suits the needed result.

Polynomial Proton Over a year ago

While creating the checkbox from array, cant you do something like <input type="hidden" data-price="50" name="array[0][id]" data-quantity=[count] value="1"/> and then use the above code and get the data-quantity attibute and use in your formula

mariobgr Over a year ago

Minutes ago I came up with a similar solution (to change the data-count of input when changed) and then to use your code to calculate. Thanks!

Bruno Costa · Accepted Answer · 2016-05-07 01:06:56Z

One way to do this is chance a little things.

Frist, in html join the input checkbox with the hidden field:

<input type="checkbox" name="array[]" data-price="50" value="1"/>

<input type="checkbox" name="array[]" data-price="20" value="5"/>

Secund, let the js like this:

var total = 0;
$('input[name^="array"]').each(function() {
    if($(this)[0].checked){
        total += $(this).attr("data-price")  * $(this).attr("value");
    }
});

If you do not want to check with the checkboxes are checked remove the if.

If total become a string so use the parseInt

See in Fiddle working

If you want to maintain the html like yours

Only change one thing put position in a Attribute. HTML::

<input type="checkbox" name="array2[count]" data-pos="0" value="1"/>
<input type="hidden" data-price="50" name="array2[id][0]" value="1"/>

<input type="checkbox" name="array2[count]" data-pos="1" value="5"/>
<input type="hidden" data-price="20" name="array2[id][1]" value="2"/>

The js wil be like that:

    var total2 = 0;

  $('input[name^="array2[count]"]').each(function() {
    if($(this)[0].checked){
        var pos = $(this).attr("data-pos");
        total2 += $('input[name^="array2[id]['+pos+']"]').attr("data-price")  * $(this).attr("value");
    }

});

The both code are in the same fiddle Test 1 is frist example and the Test 2 is this example

See in Fiddle working

Collectives™ on Stack Overflow

foreach input multidimensional array

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related