Calc price based on parseInt

Question

I have two inputs, where user types width and height of a product (let's say in mm). So min price is $250 until width=50 and height=20. Then I want to increase total price by $25 every time width OR height edited by 10mm. So total should be $275 if w=60 and h=20 (or w=50/h=30); $300 - when w=60 and h=30...

Now with my poor jquery knowledge I made this monster https://jsfiddle.net/fkqotzzb/

var basePrice = 250;
var priceForSm = 50;
var price300 = basePrice + priceForSm;
var price450 = price300 + (priceForSm * 3);
var price700 = price450 + (priceForSm * 5);
var price950 = price700 + (priceForSm * 5);

$("#stwidth, #stheight").keyup(function () {

 var stwidth = parseInt($("#stwidth").val(), 10);
 var stheight = parseInt($("#stheight").val(), 10);

 if (stwidth > 113) {
  $("#stwidth").val("113");
 }
  
  if (stheight > 62) {
  $("#stheight").val("62");
 }

 if (stwidth >= 50 && stheight >= 20 || stwidth >= 110 && stheight >= 10) {
  $(".stamp-full-price span").html(basePrice);

 }

 if (stwidth >= 30 && stheight >= 60 || stwidth == 80 && stheight == 20 || stwidth >= 60 && stheight >= 30 || stwidth >= 40 && stheight >= 40) {
  $(".stamp-full-price span").html(price300);
 }

 if (stwidth >= 110 && stheight >= 20 || stwidth >= 110 && stheight == 30 || stwidth >= 70 && stheight >= 30 || stwidth >= 60 && stheight >= 40 || stwidth >= 50 && stheight >= 50 || stwidth >= 40 && stheight >= 60) {
  $(".stamp-full-price span").html(price450);
 }

 if (stwidth >= 110 && stheight >= 40 || stwidth >= 110 && stheight >= 50 || stwidth >= 90 && stheight >= 40 || stwidth >= 80 && stheight >= 50 || stwidth >= 60 && stheight >= 60) {
  $(".stamp-full-price span").html(price700);
 }

 if (stwidth >= 100 && stheight >= 60 || stwidth >= 111 && stheight >= 50) {
  $(".stamp-full-price span").html(price950);
 }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="stwidth" id="stwidth" value="50" class="form-control input-xs" maxlength="3"> x <input type="text" name="stheight" id="stheight" value="20" class="form-control input-xs" maxlength="2"> мм

<div class="stamp-full-price">
  Total: <span>250</span>
</div>

Here prices and sizes set manually, but I don't want to set them so, it could be nice to control price by width and height separately. It also doesn't cover all the sizes an cases, so I can't predict what price could be shown in specific situation, and it's really monster :).

I also have some another options next after sizes in form of radios and checkboxes. So how to get value of a total price after sizes defined to add a price of radio/checkbox?

Answer 1

while you already have found way to get width/height and want to increment price by $25 for every extra 10, just make a math:

var stwidth = parseInt($("#stwidth").val(), 10);
var stheight = parseInt($("#stheight").val(), 10);

var price = 250;

if(stwidth > 50) {
  price += 25 * Math.ceil((stwidth - 50) / 10)
}

if(stheight > 20) {
  price += 25 * Math.ceil((stheight - 20) / 10)
}

$(".stamp-full-price span").html(price);

When you are in similar situation always try to make math how you would count it on paper, maybe it will be easier to learn faster and get it done. You can just write down all steps how you count price for some values and then just replace some parts with variables.

Answer 2

Here is one more solution, where price calculated on rounded values

var basePrice = 250;
var baseW = 50;
var baseH = 20;

$("#stwidth, #stheight").keyup(function () {
 var stwidth = parseInt($("#stwidth").val(), 10);
 var stheight = parseInt($("#stheight").val(), 10);

 var dW = (stwidth - baseW) > 0 ? Math.round((stwidth - baseW)/10) : 0;
 var dH = (stheight - baseH) > 0 ? Math.round((stheight - baseH)/10) : 0;
        var price = basePrice + dW*25 +dH*25;
        $(".stamp-full-price span").html(price);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="stwidth" id="stwidth" value="50" class="form-control input-xs" maxlength="3"> x 
<input type="text" name="stheight" id="stheight" value="20" class="form-control input-xs" maxlength="2"> мм

<div class="stamp-full-price">
  Total: <span>250</span>
</div>