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>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>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: