CODEWITHSUNDEEP
javascriptjquerywebcalculation
alexanderstanchev
alexanderstanchev

Reputation: 75

Calculator height width

I have a table with measurement - width and height (attached image). The red row is the width and the yellow column is the height. For width 400 and height 700 the price is 1025. The max width is 600, and the max height is 900. I did it with selects, but I have a problem to create calculation of the prices with inputs and if the user can write values between this numbers - for example if a customer writes 750 * 450mm the price should be 1325 becuase have to round off to the higher price after 700x400. 

jQuery('.calc-btn').click(function(e) {
  e.preventDefault();
  var pricePerDoor = 725,
    widthInc = 225,
    heightInc = 75,
    oneDoorPrice,
    wert1 = jQuery('#width').prop('selectedIndex') + 1,
    wert2 = jQuery('#height').prop('selectedIndex') + 1,
    oneDoorPrice = (pricePerDoor + (wert1 * widthInc) + (wert2 * heightInc));
  jQuery('.total').val(oneDoorPrice);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<select id="width">
<option value="400">400mm</option>
<option value="500">500mm</option>
<option value="600">600mm</option>
</select>
<select id="height">
<option value="700">700mm</option>
<option value="800">800mm</option>
<option value="900">900mm</option>
</select>
<input type="text" name="total" class="total">
<input type="submit" class="calc-btn" value="Submit">

image

Upvotes: 1

Views: 346

Answers (1)

Yogen Darji
Yogen Darji

Reputation: 3300

You can check from width and height array index of nearest highest number form array and assign index that to you logic.

for (var i = widthArr.length - 1; i >= 0; i--) {
    if (widthArr[i] >= wert1)
      widIndex = i + 1;
}

Working sample

jQuery('.calc-btn-input').click(function(e) {
  e.preventDefault();
  var pricePerDoor = 725,
    widthInc = 225,
    heightInc = 75;

  var widthArr = [400, 500, 600];
  var heightArr = [700, 800, 900];

  var widIndex = widthArr.length;
  var heightIndex = heightArr.length;

  var wert1 = parseInt(jQuery('#width_input').val());
  var wert2 = parseInt(jQuery('#height_input').val());

  for (var i = widthArr.length - 1; i >= 0; i--) {
    if (widthArr[i] >= wert1)
      widIndex = i + 1;
  }

  for (var i = heightArr.length - 1; i >= 0; i--) {
    if (heightArr[i] >= wert2)
      heightIndex = i + 1;
  }

  var oneDoorPrice = (pricePerDoor + (widIndex * widthInc) + (heightIndex * heightInc));
  jQuery('.total-input').val(oneDoorPrice);
});

jQuery('.calc-btn').click(function(e) {
  e.preventDefault();
  var pricePerDoor = 725,
    widthInc = 225,
    heightInc = 75,
    oneDoorPrice,
    wert1 = jQuery('#width').prop('selectedIndex') + 1,
    wert2 = jQuery('#height').prop('selectedIndex') + 1,
    oneDoorPrice = (pricePerDoor + (wert1 * widthInc) + (wert2 * heightInc));
  jQuery('.total').val(oneDoorPrice);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select id="width">
  <option value="400">400mm</option>
  <option value="500">500mm</option>
  <option value="600">600mm</option>
</select>
<select id="height">
  <option value="700">700mm</option>
  <option value="800">800mm</option>
  <option value="900">900mm</option>
</select>

<input type="text" name="total" class="total">
<input type="submit" class="calc-btn" value="Submit">
<br>
<br>
<input id="width_input">
<input id="height_input">

<input type="text" name="total" class="total-input">
<input type="submit" class="calc-btn-input" value="Submit">

Upvotes: 2

Related Questions