Special Pricing calculator

I want to create form with special rate calculator.

For Example:

1st 1kg = USD 20
Each Additional 1kg = 15

Once customer add their **KG : (Example 5kg), it should load Total amount : USD 80

is there any possible way to add this type of form, or any leads to guide me?

thanks in advance.

Hello @ril1,

There is not for the exemple that you need, but you can use it and change it for your needs…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background-color: #f0f0f0;
    font: 1em/150% verdana, arial, helvetica, sans-serif;
 }

h1 {
    font-size: 1em;
    color: #839C29;
    text-align: center;
 }

#calc {
    width: 16em;
    margin: auto;
    background-color: #fff;
    color: #839C29;
    box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.2 );
 }

#calc div {
    display: table;
    width: 100%;
 }

#calc div span {
    width: 50%;
    display: table-cell;
    border: 0.062em solid #a3c577;
    border-bottom: 0;
    box-sizing: border-box;
    vertical-align: middle;
    text-align: center;

 }
#calc div span:first-of-type, 
#calc div:first-of-type span:last-of-type{
    padding: 0.5em 0;

 }

#calc div span:last-of-type {
    border-left: 0;
 }

#calc div:last-of-type span{
    border-bottom: 0.062em solid #a3c577;
 }

#calc input{ 
    width: 100%;
    height: 4em;
    padding: 0; 
    margin: 0;
    border: 0;
    background-color: #fff;
    font-size: 1em;
    color: #839C29;
    text-align: center;
 }

#calc input[type="reset"] {
    border: 0.062em solid #a3c577;
    border-top: 0;
    box-shadow: inset 0 0 1em rgba( 163, 197, 119, 0.5);
 }
</style>

</head>
<body> 

 <h1>Calculator:</h1>

  <form id="calc" action="#">
   <div>
    <span>
     Pool Size
    </span><span>
     Length/Width Of Your Pool
    </span>
   </div><div>
    <span>
     <label for="length">Length</label>
    </span><span>
     <input id="length" type="text" placeholder="In Metres">
    </span>
   </div><div>
    <span>
     <label for="width">Width</label>
    </span><span>
     <input id="width" type="text" placeholder="In Metres">
    </span>
   </div><div>
    <span>
     <label for="m2">m<sup>2</sup></label>
    </span><span>
     <input id="m2" type="text"  disabled>
    </span>
   </div><div>
    <span>
     <label for="panels">Solar Panels Needed  For Pool</label>
    </span><span>
     <input id="panels" type="text"  disabled>
    </span>
   </div>
    <input type="reset" value="Clear Fields">
  </form>

<script>
(function( d ) {
   'use strict';

   var l = d.getElementById( 'length' );
   var w = d.getElementById( 'width' );

   l.addEventListener( 'keyup', calculate, false );
   w.addEventListener( 'keyup', calculate, false );
function calculate() {
   if ( ( isNaN( l.value ) || ( l.value =='' )) && 
        ( isNaN( w.value ) || ( w.value == '')) ) {
          return;
    }
   else {
          d.getElementById( 'm2' ).value = l.value * w.value;
          d.getElementById( 'panels' ).value = Math.ceil( l.value * w.value / 3.75 );
    }
 }
}(document));
</script>

</body>
</html>
1 Like

AThere is another one…

<form onsubmit="return false" oninput="amount.value = (hours.valueAsNumber * rate.valueAsNumber) + ((hours.valueAsNumber * rate.valueAsNumber) * vat.valueAsNumber)">
  <legend>Invoice</legend>

  <p><label for="hours">Number of hours</label>
  <input type="number" min="0" id="hours" name="hours"></p>

  <p><label for="rate">Rate</label>
  <span>£</span><input type="number" min="0" id="rate" name="rate"></p>

  <p><label for="vat">VAT</label>
  <input type="number" min="0" id="vat" value="0.20" name="vat"></p>

  <p>Total: <strong>£<output name="amount" for="hours rate vat">0</output></strong></p>
</form>
1 Like

Thanks a ton. I was looking for something like this. (This is for my blocs site : http://www.eparcel.lk/v2/rates-and-locations.html)

Examples:

  1. http://www.dhl.com/en/tools/volumetric_weight_express.html
  2. http://www.fedex.com/in/tools/dimweight.html
  3. http://www.online-calculators.co.uk/volumetric/weight.php