Unable to calculate area from inputs using javascript

Question

Expected Calculator Actual Calculator I want to make calculator to convert units of area calculation of nepal using javascript that is to convert Ropani, Anna ,Paisa , Dam to square feet and square meter and to convert Bigha ,Katha , Dhur to square feet and square meter. User can either convert Ropani system to square feet and square meter or Bigha system to square feet and square meter. So , I want to use same input field for calculating total of square feet and square meter.

It is working for converting Ropani , Anna ,Paisa , Dam system to square feet and square meter but not working for converting bigha system to square feet and square meter.

Please help me.

Html form

 <input type="text" class="form-control ropani"  name="landinfo_ropani" />
 <input type="text" class="form-control aana"  name="landinfo_aana" />                                          
 <input type="text" name="landinfo_paisa" class=" form-control paisa"  />                                              
 <input  type="text" class="form-control dam" name="landinfo_daam"  />                                                  
 <input name="landinfo_bigha"  class="form-control  bigha" placeholder="Bigha" type="text"  value="" id="bigha"/>                                                  
 <input name="landinfo_katha "  class="form-control katha" data-val="true"   type="text" value="" id="katha"/>                                              
 <input name="landinfo_dhur"  class="form-control dhur" data-val="true" placeholder="dhur"  type="text" value="dhur"/>                                       
 <input type="text" class="form-control total total2" name="landinfo_sqfeet" placeholder="Sq.feet" />                                           
 <input type="text" class="form-control total1 total3" name="landinfo_sqmeter" placeholder="Sq.feet" />

Javascript

   var obj = {};
$('input:not(.total)').on('keyup', function(event) {
  var area = 0;
  var area1 = 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;
  area1 += obj.ropani * 508.73704704 + obj.aana * 31.79606544 + obj.paisa * 7.94901636 + obj.daam * 1.98725409;

  $(".total1").val(parseFloat(area1));
  $(".total").val(parseFloat(area));

});
  var obj1 = {};
$('input:not(.total2)').on('keyup', function(event) {
  var area2 = 0;
  var area3 = 0;
var data=$("#bigha").val();
// console.log(data);debugger;
  if (parseFloat(event.target.value) == NaN) return;
  obj1[event.target.classList[0]] = event.target.value;
  obj1.bigha = obj1.bigha ? obj1.bigha : $("#bigha").val();
  obj1.katha = obj1.katha ? obj1.katha : $("#katha").val();
  obj1.dhur = obj1.dhur ? obj1.dhur : $("#dhur").val();

  area2 += obj1.bigha * 72,900 + obj1.katha * 3,645 + obj1.dhur * 182.25 ;
  area3 += obj1.bigha * 6772.41 + obj1.katha * 338.62 + obj1.dhur * 16.93;
// console.log(area2);debugger;
  $(".total3").val(parseFloat(area2));
  $(".total2").val(parseFloat(area3));

});

I added image in question. When i put value 1 in bigha field ,it shows NaN in square feet field and 72 in square meter field, which is wrong. Please help me@RussellB — Prabina, Jul 26 '19 at 04:25

shrys · Accepted Answer · 2019-07-26T05:03:52.070

As I understood, there are two systems so I divided input into rop_sys and bhig_sys. Each have their own listeners and the object of each takes the first class from the classList. The order in the classList matters hence I placed them in the beginning (I would recommend the $().data() approach). I've taken reference from this question. Consider the following:

var obj = {};
$('input.rop_sys:not(.total)').on('keyup', function(event) {
  var area = 0;
  var area1 = 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;
  area1 += obj.ropani * 508.73704704 + obj.aana * 31.79606544 + obj.paisa * 7.94901636 + obj.daam * 1.98725409;

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


var obj1 = {};
$('input.bhig_sys:not(.total2)').on('keyup', function(event) {
  var area2 = 0;
  var area3 = 0;
  var data = $("#bigha").val();
  if (parseFloat(event.target.value) == NaN) return;
  obj1[event.target.classList[0]] = event.target.value;
  obj1.bigha = obj1.bigha ? obj1.bigha : $("#bigha").val();
  obj1.katha = obj1.katha ? obj1.katha : $("#katha").val();
  obj1.dhur = obj1.dhur ? obj1.dhur : $("#dhur").val();

  area2 += obj1.bigha * 72.900 + obj1.katha * 3, 645 + obj1.dhur * 182.25;
  area3 += obj1.bigha * 6772.41 + obj1.katha * 338.62 + obj1.dhur * 16.93;
  // console.log(area2);debugger;
  $(".total3").val(parseFloat(area2));
  $(".total2").val(parseFloat(area3));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="ropani form-control rop_sys" name="landinfo_ropani" placeholder="ropani" />
<input type="text" class="aana form-control rop_sys" name="landinfo_aana" placeholder="aana" />
<input type="text" name="landinfo_paisa" class="paisa form-control rop_sys" placeholder="paisa" />
<input type="text" class="dam form-control rop_sys" name="landinfo_daam" placeholder="daam" />
<input name="landinfo_bigha" class="bigha form-control bhig_sys" placeholder="Bigha" type="text" id="bigha" />
<input name="landinfo_katha " class="katha form-control bhig_sys" data-val="true" placeholder="katha" type="text" id="katha" />
<input name="landinfo_dhur" class="dhur form-control bhig_sys" data-val="true" placeholder="dhur" type="text" id="dhur" />
<br />
<br />
<input type="text" class="form-control total total2 rop_sys" name="landinfo_sqfeet" placeholder="Sq.feet" />
<input type="text" class="form-control total1 total3 bhig_sys" name="landinfo_sqmeter" placeholder="Sq.meter" />

When I insert 1 in bigha field ,its showing NaN. It's not working well. I have added the image that describe how it should be.@shrys — Prabina, Jul 26 '19 at 04:47
`dhur` id was not added do the value of `$("#dhur").val()` was `undefined`, can you check now? — shrys, Jul 26 '19 at 05:04
When I insert value in bikha field, and did console log for $("#bigha").val(); , it displays the data in console@shrys . Isn't there any other method to calculate the area? — Prabina, Jul 26 '19 at 05:17
@prabinashrestha I don;t understand, there are many ways this can be done, my suggestion in the answer was to move the class values such as `ropani` to the `data-` attributes — shrys, Jul 26 '19 at 05:20
I want to perform like in above correct calculator image. If i insert value in bigha field , it should be automatically converted to square meter and square field and display in another field. I want same like the example given by you for converting ropani system to square feet and square meter.@shrys — Prabina, Jul 26 '19 at 05:25
@prabinashrestha i think the above example works as you've described — shrys, Jul 26 '19 at 05:28
Thank you so much. Ok I will ask you after a while about javascript and php related issue.@shrys — Prabina, Jul 26 '19 at 05:38
Please help me in this @shrys https://stackoverflow.com/questions/57214165/unable-to-fill-the-other-fields-on-the-basis-of-option-selected — Prabina, Jul 26 '19 at 06:20
@Prabina hi, you can post a question on SO, I'll try to answer — shrys, Aug 17 '19 at 11:44
https://stackoverflow.com/questions/57636023/unable-to-insert-data-from-dynamically-created-add-remove-fields-in-database-usi?noredirect=1#comment101724845_57636023 @shrys — Prabina, Aug 24 '19 at 08:03

Unable to calculate area from inputs using javascript

1 Answers1