Free & premium HTML Car (rental) taxi website template. with free Script, .you can use this website for taxi, cars, buses, any type of hire services. your Customers Can calculate the value using this calculator.also you can use this code in your blogger website.! ok, let's see how to configure this web page.
A section
<title>taxi calculator</title>
There is four option for select. You can change highlight text area what you want! 1) Selection Name
2) Selection Value
<input type="checkbox" name="choice" value="2000" onchange="checkTotal()"/> With Ac<br/>
<input type="checkbox" name="choice" value="1500" onchange="checkTotal()"/> With cool box <br/>
<input type="checkbox" name="choice" value="3000" onchange="checkTotal ()"/>With breakfast<br/>
<input type="checkbox" name="choice" value="5000" onchange="checkTotal()"/>With travel Guider <br/>
A section
<br />
<div class="form-group">
<label for="rec_len">Enter the Mileage:</label>
<input type="text" class="form-control" id="rec_len" >
</div>
<div class="form-group">
<label for="rec_wid">Enter Passenger Count: </label>
<input type="text" class="form-control req" id="rec_wid" >
</div>
<div class="form-group">
<label for="result">Total:</label>
<input type="text" class="form-control req" id="result" readonly >
</div>
<button type="submit" class="btn btn-default" onclick="findAreaOfTriangle()">Submit</button>
</div>
You can re-name below text in above codes Enter the Mileage: type your trip Mileage
Enter Passenger Count: type your passenger count
Total: total price
In this section, you need to type mileage and passenger count
After that
Your mileage amount will be multiplying by 2
Your passenger count will be multiplying by 4
After that, a section and b section total will addition
If want to change that 2 and 4 find below code in main code and change the value
KM=RecLen*2;
pa= RecWid*4;
to change currency type find below code in main code and change the currency
document.listForm.total.value = "RS."+sum;
B Section
document.getElementById("result").value = "Rs."+total;
here is the Full Code (Copy and Past) your Page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>taxi calculator </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Load Bootstrap library for better UI look & feel -->
<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<script>
function findAreaOfTriangle(){
var RecLen, RecWid, total;
document.listForm.total.value = '';
var sum = 0;
for (i=0;i<document.listForm.choice.length;i++) {
if (document.listForm.choice[i].checked) {
sum = sum + parseInt(document.listForm.choice[i].value);
}
}
RecLen = document.getElementById("rec_len").value;
RecWid = document.getElementById("rec_wid").value;
KM=RecLen*2;
pa= RecWid*4;
total=KM + pa+sum ;
document.getElementById("result").value = "Rs."+total;
}
</script>
</head>
<body>
<div class="container">
<br />
<h2>abc Tours </h2>
<script type="text/javascript">
function checkTotal() {
document.listForm.total.value = '';
var sum = 0;
for (i=0;i<document.listForm.choice.length;i++) {
if (document.listForm.choice[i].checked) {
sum = sum + parseInt(document.listForm.choice[i].value);
}
}
document.listForm.total.value = "RS."+sum;
}
</script>
<form name="listForm">
<input type="checkbox" name="choice" value="2000" onchange="checkTotal()"/> With Ac<br/>
<input type="checkbox" name="choice" value="1500" onchange="checkTotal()"/> With cool box <br/>
<input type="checkbox" name="choice" value="3000" onchange="checkTotal ()"/>With breakfast<br/>
<input type="checkbox" name="choice" value="5000" onchange="checkTotal()"/>With travel Guider <br/>
<br>Total:</br> <input type="text" size="20" name="total" value= "0"/>
</form>
<br />
<div class="form-group">
<label for="rec_len">Enter the Mileage:</label>
<input type="text" class="form-control" id="rec_len" >
</div>
<div class="form-group">
<label for="rec_wid">Enter Passenger Count: </label>
<input type="text" class="form-control req" id="rec_wid" >
</div>
<div class="form-group">
<label for="result">Total:</label>
<input type="text" class="form-control req" id="result" readonly >
</div>
<button type="submit" class="btn btn-default" onclick="findAreaOfTriangle()">Submit</button>
</div>
</body>
</html>
If you Like this article Don't Forget To Share
