0

I am working on developing an inventory checking form for my restaurant. The idea is that I can weigh for example a partially full bottle of Vodka (for example!) and from that weight the volume in milliliters will be automatically calculated based on the weight (adjuster) and density of the product.

The code is automatically generated with PHP. Here is an example, I choose which bottle of vodka and based on that choice I would like to display the amount in the span '1_liveWeight'. The problem I am having due to my limited experience is with this line of code:

var qty = (weight - adjuster) * density;

I would like it to function like this:

var qty = (weight - adjuster_!value selected from item_1!) * density!value selected from item_1!

The bits between the ! being where I would like to insert the value.

Below is an extract of the code generated in php.

HTML

<select id='item_1'>
    <option value='3'>Smirnoff Vodka 1000ml</option>
    <option value='4'>Absolute Vodka 750ml</option>
</select>
<input type='hidden' id='adjuster_3' value='140'>
<input type='hidden' id='density_3' value='0.96'>
<input type='hidden' id='adjuster_4' value='100'>
<input type='hidden' id='density_4' value='0.96'>
<input type='text' id ='weight_1' name ='weight'>
<span id='1_liveWeight'>0</span>

JQuery

$(document).ready(function(){
   $("#item_1").change(function(){
       var item = $('#item_1').val();
       var adjuster3 = $('#adjuster_3').val();
       var density3 = $('#density_3').val();
       var adjuster4 = $('#adjuster_4').val();
       var density4 = $('#density_4').val();
       var weight = $('#weight_1').val();
       var qty = (weight - adjuster)*density+item;
       $("#1_liveWeight").html("<b>"+ qty +"</b>");
    });
});

I hope I've explained my issue well enough! Thanks for the help,

DB

Dingo Bruce
  • 405
  • 1
  • 7
  • 14

4 Answers4

0

You need to assign the correct adjuster and density variable based on the item selection:

 $(document).ready(function(){
       $("#item_1").change(function(){
           var item = $('#item_1').val();
           var adjuster3 = $('#adjuster_3').val();
           var density3 = $('#density_3').val();
           var adjuster4 = $('#adjuster_4').val();
           var density4 = $('#density_4').val();
           var weight = $('#weight_1').val();

           weight = Number(weight);
           var adjuster, density;
           if(item == 3){
              adjuster = Number(adjuster3);
              density = Number(density3);
           }
           else if(item == 4){
              adjuster = Number(adjuster4);
              density = Number(density4);
           }
           var qty = (weight - adjuster) * density;
           $("#1_liveWeight").html("<b>"+ qty +"</b>");
        });
    });
Chris
  • 13,100
  • 23
  • 79
  • 162
0

I'd probably do it something more like this:

$(document).ready(function(){

  var density = 0;
  var adjuster = 0;
  
  $("#item_1").change(function(){
    recalculateWgt();  
  });

  $("#weight_1").keyup(function(){
    recalculateWgt();  
  });
  
  recalculateWgt();
  
  function recalculateWgt() {
       var item = $('#item_1').val();
       var adjuster = $('#adjuster_' + item).val();
       var density = $('#density_' + item).val();
       var weight = $('#weight_1').val();
       var qty = (weight - adjuster)*density+item;
       $("#1_liveWeight").html("<b>"+ qty +"</b>");
  }
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='item_1'>
    <option value='3'>Smirnoff Vodka 1000ml</option>
    <option value='4'>Absolute Vodka 750ml</option>
</select>
<input type='hidden' id='adjuster_3' value='140'>
<input type='hidden' id='density_3' value='0.96'>
<input type='hidden' id='adjuster_4' value='100'>
<input type='hidden' id='density_4' value='0.96'>
<input type='text' id ='weight_1' name ='weight'>
<span id='1_liveWeight'>0</span>

You could use $("#weight_1").change() if you preferred to have the value update only when the quantity field loses focus.

K Scandrett
  • 16,390
  • 4
  • 40
  • 65
0

I would say vodka really helped me a lot to understand but still i couldn't figure out - do you need details for just the selected product or for all when your dropdown changes? .Anyway here is something

 $(document).ready(function(){
   $("#item_1").change(function(){
   var item = $('#item_1').val();     // may be 3 or 4 or whatever depends on choice
   var adjuster = $('#adjuster_'+ item).val(); // dynamic selector
   var density = $('#density_'+item).val();
   var weight = $('#weight_'+item).val();
   var qty = (weight - adjuster)*density; // density is constant at a given temp. for given liquid why were you chaging this? dilluting? 
   $("#"+item+"_liveWeight").html("<b>"+ qty +"</b>");
  });
});
Vinay
  • 7,442
  • 6
  • 25
  • 48
-2

I ended up solving the problem by learning about eval()

It worked as intended:

eval("var chosenAdjuster = adjuster"+item);
eval("var chosenDensity = density"+item);
var qty = (weight - chosenAdjuster) * chosenDensity;
Dingo Bruce
  • 405
  • 1
  • 7
  • 14
  • 1
    It may work, but it's awful practice, don't do it. Suggest you look at the other posted answers. – Evan Trimboli Dec 02 '16 at 01:58
  • Out of curiosity why is awful practice? The other options posted don't really take in to account that the script is being generated by php and there can be some products with 1 or 2 options but others may have many more. Getting the php to produce code as suggested above would be a pain compared to this little 2 liner. – Dingo Bruce Dec 02 '16 at 02:05
  • On the second part of your comment... you don't need to change anything in my JavaScript if you add more options. Just echo another `option`, another matching `input` for the adjuster and another `input` for the density in the HTML, exactly as you are doing for you solution – K Scandrett Dec 02 '16 at 02:17
  • http://stackoverflow.com/questions/86513/why-is-using-the-javascript-eval-function-a-bad-idea, amongst other reasons. Google it. – Evan Trimboli Dec 02 '16 at 02:35