CODEWITHSUNDEEP
javascriptjquery
Meules
Meules

Reputation: 1389

Calculate with input fields and each function

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);
     });

Upvotes: 0

Views: 221

Answers (6)

baao
baao

Reputation: 73241

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>

Upvotes: 0

inic
inic

Reputation: 522

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()

Upvotes: 1

Elfayer
Elfayer

Reputation: 4561

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>

Upvotes: 0

Ashish Ranade
Ashish Ranade

Reputation: 605

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

Upvotes: 0

Anuraag Vaidya
Anuraag Vaidya

Reputation: 847

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

Upvotes: 1

guramidev
guramidev

Reputation: 2238

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);
 });

Upvotes: 0

Related Questions