Area calculation with four input fields using Jquery to convert Ropani-Anna to sq.ft

Question

I have four input fields.I want to convert ropani ,anna, paisa and dam to sq. ft. I'm unable to convert it .I want to calculate value of four input fields and want to display in another field. Please help me.

$(document).on("change", ".ropani", function() {
      var area = 0;
      $(‘.ropani’).on(‘keyup’, function() {
            var ropani = $(".ropani").val();
            var aana = $(".aana").val();
            var paisa = $(".paisa").val();
            var dam = $(".dam").val();
            area += ropani * 5476.0000;
            area += aana * 342.2500;
            area += paisa * 85.5625;
            // if (parseFloat(daam) < 4) {
            area += daam * 21.390625;
            //s }

            $(“.total”).html(area);
          };

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type=”text” class=”ropani” />
<input type=”text” class=”anna” />
<input type=”text” class=”paisa” />
<input type=”text” class=”dam” />
<input type=”text” class=”total” />

Explain the specific problem and errors encountered. Provide sample input with expected results. Also explain what those multipliers represent. See [ask] and [mcve] — charlietfl, Jul 17 '19 at 11:53
For a start, it seems you are using the wrong text editor, or wrong settings in it: the characters `“` and `”` should all be `"`, and the `‘` and `’` should be `'`. This causes the classes in HTML to be wrong, and syntax errors in the Javascript — Kaddath, Jul 17 '19 at 12:07

score 1 · Answer 1 · answered Jul 17 '19 at 12:00

Instead of adding change event to the input.ropani. Add keyup event to the all inputs except .total. use .val() to change the value of input.

$("input:not(.total)").on("keyup", function() {
  var area = 0;
  var ropani = +$(".ropani").val() || 0;
  var aana = +$(".aana").val() || 0;
  var paisa = +$(".paisa").val() || 0;
  var dam = +$(".dam").val() || 0;
  area += ropani * 5476.0000;
  area += aana * 342.2500;
  area += paisa * 85.5625;
  area += dam * 21.390625;
  console.log(area); 
  $('.total').val(area);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" class="ropani" />
<input type="number" class="anna" />
<input type="number" class="paisa" />
<input type="number" class="dam" />
<input type="number" class="total" />

There is an error in the OP's code you didn't correct: `anna` != `aana` — Kaddath, Jul 17 '19 at 12:03

shrys · Accepted Answer · 2019-07-17T13:07:01.033

There were a few mistakes in the code. Assuming that you want the value in the fifth field on change of any field, please consider the following:

$('input:not(.total)').on('keyup', function() {
  var area = 0;
  var ropani = $(".ropani").val();
  var aana = $(".aana").val();
  var paisa = $(".paisa").val();
  var daam = $(".dam").val();
  area += ropani * 5476.0000;
  area += aana * 342.2500;
  area += paisa * 85.5625;
  // if (parseFloat(daam) < 4) {
  area += daam * 21.390625;
  //s }

  $(".total").val(parseFloat(area));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
ropani<input type="text" class="ropani" /><br> anna
<input type="text" class="aana" /><br> paisa
<input type="text" class="paisa" /><br> dam
<input type="text" class="dam" /><br> total
<input type="text" class="total" /><br>

Changes after @Fallerreaper's suggestions:

var obj = {};
$('input:not(.total)').on('keyup', function(event) {
  var area = 0;
  if (parseFloat(event.target.value) == NaN) return;
  obj[event.target.classList[0]] = event.target.value;
  obj.ropani = obj.ropani ? obj.ropani : $(".ropani").val();
  obj.aana = obj.aana ? obj.aana : $(".aana").val();
  obj.paisa = obj.paisa ? obj.paisa : $(".paisa").val();
  obj.daam = obj.daam ? obj.daam : $(".dam").val();
  area += obj.ropani * 5476.0000 + obj.aana * 342.2500 + obj.paisa * 85.5625 + obj.daam * 21.390625;

  $(".total").val(parseFloat(area));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
ropani<input type="text" class="ropani" /><br> anna
<input type="text" class="aana" /><br> paisa
<input type="text" class="paisa" /><br> dam
<input type="text" class="dam" /><br> total
<input type="text" class="total" /><br>

if you can, you can also save computation a bit by defining static references to the ropani, aana, paisa, and daam. Therefore, you dont need to query the dom for it every time. — Fallenreaper, Jul 17 '19 at 12:49

Area calculation with four input fields using Jquery to convert Ropani-Anna to sq.ft

2 Answers2

Linked