Calculate with input fields and each function

Question

Maybe a dumb question but I can't find an answer to it. Still learning :)

I have a form with two input fields with the same class name. I'm trying to grab both values and calculate the square metres and price. Grabbing the input values isn't a problem but "storing" the values in variable is.

To calculate the price I need to do something like L x W x Price. But how can I create the two Length and Width variable when using the .each() function (names can be different offcourse)? Is this a good approach?

Adding ID's or classnames isn't a option since everything is created dynamically!

So what I have is this:

function update_amounts() {
  var price = '129';
  var sum = 0;  

  $('#product_configure_form .product-configure-custom-option input').each(function(){

   var value = parseFloat($(this).val()) / 100;

  });
      // Here I need to do something like 
      sum = value1 * value2 * price
      ////////////////////////////////// 

       var sumsum = sum.toString().replace(/\./g, ',');    
       $('.price-wrap .price').text('€ ' + sumsum);
     }

     $(document).ready(function(){
       $("#product_configure_form").on("change", ".product-configure-custom-option input", update_amounts);
     });

can you give me your html also and I will code you out a codepen example of how I would do it? :) — user4157770
– user4157770, Commented Sep 23, 2015 at 13:12
You'll need to set a different id to both inputs instead of using class if you want to get the values like that. Also, where does your two variables value1 and value2 gets declared ? — Elfayer
– Elfayer, Commented Sep 23, 2015 at 13:12

inic · Accepted Answer · 2015-09-23 13:29:21Z

1

Since you have a fixed number of elements you can skip the foreach and just use jQuery selectors to find both values and do what ever you want to them.

    val1 = $(".product-configure-custom-option:first").val()
    val2 = $(".product-configure-custom-option:nth(1)").val()

answered Sep 23, 2015 at 13:29

inic

5224 silver badges10 bronze badges

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

1 Comment

Meules Over a year ago

Didn't thought of this. Because of fixed fields this is usefull since it doesnt matter if I do val1 x val2 or vice versa.

Anuraag Vaidya · Accepted Answer · 2015-09-23 13:15:07Z

1

A better approach would be using classes or data attributes. That will make your code more readable.

If you want to proceed with your current approach, follow this.

If you know the indexes of your input boxes, i.e. the order in which they are arranged, you can use:

var values={value1:0,value2:0};
$('#product_configure_form .product-configure-custom-option input').each(function(index, element){
    if(index==0)
    {
        values.value1=$(element).val();
    }
    else if(index==1)
    {
        values.value2=$(element).val();
    }
});
//now value1 has the first, and value2 has the second
//then do sum = values.value1 * values.value2 * price

answered Sep 23, 2015 at 13:15

Anuraag Vaidya

8479 silver badges16 bronze badges

Comments

guramidev · Accepted Answer · 2015-09-23 13:14:18Z

0

try this:

 function update_amounts() {
 var price = '129';
 var sum = 0;  
  $('#product_configure_form .product-configure-custom-option input').each(function( i,el ){

 sum += parseFloat( el.value ) / 100;

 });

   sum = sum.toString().replace(/\./g, ',');   

   $('.price-wrap .price').text('€ ' + sum);
 }

 $(document).ready(function(){
   $("#product_configure_form").on("change", ".product-configure-custom-option input", update_amounts);
 });

answered Sep 23, 2015 at 13:14

guramidev

2,2381 gold badge17 silver badges19 bronze badges

Comments

Ashish Ranade · Accepted Answer · 2015-09-23 13:17:46Z

0

Set a global variables above the function which allow You to save the variable value or you can use the .next() inside loop to select the next element. I think your approach is right just need some modification, add your html for some more help

answered Sep 23, 2015 at 13:17

Ashish Ranade

6053 silver badges14 bronze badges

Comments

Elfayer · Accepted Answer · 2015-09-23 13:21:23Z

Here is an modified working example of the code you gave :

function update_amounts() {
  var price = '129';
  var sum = 0;
  var value1, value2;

  value1 = parseFloat($('#value1').val()) / 100;
  value2 = parseFloat($('#value2').val()) / 100;
  // Here I need to do something like 
  sum = value1 * value2 * price;
  ////////////////////////////////// 

  var sumsum = sum.toString().replace(/\./g, ',');
  $('#price').text('€ ' + sumsum);
}

$(document).ready(function() {
  $(document).on("change", "input", update_amounts);
  update_amounts();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="value1Input">value1:</label>
<input id="value1" name="value1Input" value="10.0" /><br/>
<label for="value2Input">value2:</label>
<input id="value2" name="value2Input" value="12.5" />
<div id="price"></div>

baao · Accepted Answer · 2015-09-23 13:34:58Z

0

Here's a vanilla javascript solution I think is more clean:

var price = 129;
document.getElementById('bar').addEventListener('click', function(val) {
    var inputs = document.querySelectorAll('#foo input');
    var res = Array.from(inputs) // or [].slice.call(inputs) for older browsers
        .reduce(function(now,pre){return now.value * pre.value}) * price;   
  document.getElementById('res').innerHTML = res.toString().replace('.',',') + '€';
});

<form id="foo">
    <input/>
    <input/>
</form>
<button id="bar">Click</button>
<div id="res"></div>

edited Sep 23, 2015 at 13:34

answered Sep 23, 2015 at 13:20

baao

73.5k18 gold badges152 silver badges209 bronze badges

Collectives™ on Stack Overflow

Calculate with input fields and each function

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related