Top

Follow me and receive all the latest free scripts:

By Email:

Categories
Most Popular Posts

jQuery online converter, length and distance conversions

Published September 13, 2015 by , category jQuery

jQueryOnline converterLengthDistanceConvertions

How to create an online converter using jQuery

Introduction

In this tutorial I will show you how to create an online converter without page refreshment.

To illustrate my system I use a simple length converter (or distance converter) but you can adapt and create a temperature converter or an area converter, a time converter or also a speed converter…

Here is the length conversion table for length and distances including kilometers, meters, miles, yards and feet…

#CentimeterFootInchKilometerMeterMileMillimeterYard
Centimeter10.03280840.3937010.000010.010.000006213712100.0109361
Foot30.481120.00030480.30480.000189394304.80.333333
Inch2.540.083333310.00002540.02540.00001578325.40.0277778
Kilometer1000003280.8439370.1110000.62137110000001093.61
Meter1003.2808439.37010.00110.00062137110001.09361
Mile1609345280633601.609341609.34116090001760
Millimeter0.10.003280840.03937010.0000010.0010.0000006213710.00109361
Yard91.443360.00091440.91440.000568182914.41

Files architecture

index.php

jquery

jquery-1.10.1.min.js

Live demo

Here is a live demo, please select the from and to unit and the quantity.

=

HTML/JS code

This is the index.php file which include HTML code and JavaScript code at the end. I commented the code which is relatively simple.

<!DOCTYPE>
<html>
<head>
	<title>jQuery online converter, length and distance conversions</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>

<body>	

<form>
	<select id="from">
		<option value="from_cm">Centimeter</option>
		<option value="from_f">Foot</option>
		<option value="from_in">Inch</option>
		<option value="from_km">Kilometer</option>
		<option value="from_m">Meter</option>
		<option value="from_mi">Mile</option>
		<option value="from_mm">Millimeter</option>
		<option value="from_y">Yard</option>
	</select>
	
	<input type="text" id="quantity" value="1"> =
	
	<input type="text" id="result" value="1" readonly>
	
	<select id="to">
		<option value="to_cm">Centimeter</option>
		<option value="to_f">Foot</option>
		<option value="to_in">Inch</option>
		<option value="to_km">Kilometer</option>
		<option value="to_m">Meter</option>
		<option value="to_mi">Mile</option>
		<option value="to_mm">Millimeter</option>
		<option value="to_y">Yard</option>
	</select>
</form>



<script type="text/javascript" src="jquery/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
	$("#from, #to, #quantity").on("change click keyup", function() { // Event on select and quantity fields
		from = $("#from option:selected").val(); // Get from value
		to = $("#to option:selected").val(); // Get to value
		quantity = $("#quantity").val(); // Get quantity value
		
		// Conversion table
		if (from == "from_cm" && to == "to_cm") conv = 1;
		if (from == "from_cm" && to == "to_f") conv = 0.0328084;
		if (from == "from_cm" && to == "to_in") conv = 0.393701;
		if (from == "from_cm" && to == "to_km") conv = 0.00001;
		if (from == "from_cm" && to == "to_m") conv = 0.01;
		if (from == "from_cm" && to == "to_mi") conv = 0.000006213712;
		if (from == "from_cm" && to == "to_mm") conv = 10;
		if (from == "from_cm" && to == "to_y") conv = 0.0109361;
		
		if (from == "from_f" && to == "to_cm") conv = 30.48;
		if (from == "from_f" && to == "to_f") conv = 1;
		if (from == "from_f" && to == "to_in") conv = 12;
		if (from == "from_f" && to == "to_km") conv = 0.0003048;
		if (from == "from_f" && to == "to_m") conv = 0.3048;
		if (from == "from_f" && to == "to_mi") conv = 0.000189394;
		if (from == "from_f" && to == "to_mm") conv = 304.8;
		if (from == "from_f" && to == "to_y") conv = 0.333333;
		
		if (from == "from_in" && to == "to_cm") conv = 2.54;
		if (from == "from_in" && to == "to_f") conv = 0.0833333;
		if (from == "from_in" && to == "to_in") conv = 1;
		if (from == "from_in" && to == "to_km") conv = 0.0000254;
		if (from == "from_in" && to == "to_m") conv = 0.0254;
		if (from == "from_in" && to == "to_mi") conv = 0.000015783;
		if (from == "from_in" && to == "to_mm") conv = 25.4;
		if (from == "from_in" && to == "to_y") conv = 0.0277778;
		
		if (from == "from_km" && to == "to_cm") conv = 100000;
		if (from == "from_km" && to == "to_f") conv = 3280.84;
		if (from == "from_km" && to == "to_in") conv = 39370.1;
		if (from == "from_km" && to == "to_km") conv = 1;
		if (from == "from_km" && to == "to_m") conv = 1000;
		if (from == "from_km" && to == "to_mi") conv = 0.621371;
		if (from == "from_km" && to == "to_mm") conv = 1000000;
		if (from == "from_km" && to == "to_y") conv = 1093.61;
		
		if (from == "from_m" && to == "to_cm") conv = 100;
		if (from == "from_m" && to == "to_f") conv = 3.28084;
		if (from == "from_m" && to == "to_in") conv = 39.3701;
		if (from == "from_m" && to == "to_km") conv = 0.001;
		if (from == "from_m" && to == "to_m") conv = 1;
		if (from == "from_m" && to == "to_mi") conv = 0.000621371;
		if (from == "from_m" && to == "to_mm") conv = 1000;
		if (from == "from_m" && to == "to_y") conv = 1.09361;
		
		if (from == "from_mi" && to == "to_cm") conv = 160934;
		if (from == "from_mi" && to == "to_f") conv = 5280;
		if (from == "from_mi" && to == "to_in") conv = 63360;
		if (from == "from_mi" && to == "to_km") conv = 1.60934;
		if (from == "from_mi" && to == "to_m") conv = 1609.34;
		if (from == "from_mi" && to == "to_mi") conv = 1;
		if (from == "from_mi" && to == "to_mm") conv = 1609000;
		if (from == "from_mi" && to == "to_y") conv = 1760;
		
		if (from == "from_mm" && to == "to_cm") conv = 0.1;
		if (from == "from_mm" && to == "to_f") conv = 0.00328084;
		if (from == "from_mm" && to == "to_in") conv = 0.0393701;
		if (from == "from_mm" && to == "to_km") conv = 0.000001;
		if (from == "from_mm" && to == "to_m") conv = 0.001;
		if (from == "from_mm" && to == "to_mi") conv = 0.00000062137;
		if (from == "from_mm" && to == "to_mm") conv = 1;
		if (from == "from_mm" && to == "to_y") conv = 0.00109361;
		
		if (from == "from_y" && to == "to_cm") conv = 91.44;
		if (from == "from_y" && to == "to_f") conv = 3;
		if (from == "from_y" && to == "to_in") conv = 36;
		if (from == "from_y" && to == "to_km") conv = 0.0009144;
		if (from == "from_y" && to == "to_m") conv = 0.9144;
		if (from == "from_y" && to == "to_mi") conv = 0.000568182;
		if (from == "from_y" && to == "to_mm") conv = 914.4;
		if (from == "from_y" && to == "to_y") conv = 1;
		// end conversion table
		
		result = quantity * conv; // Result
		
		$("#result").val(result); // Display the result on the "result" field
	});
</script>

</body>
</html>

Conclusion

This is it, simple isn't it? Feel free to adapt the script to the unit converter you need, energy converter, angle converter, force converter and of course currency converter and much more.

About Simon Laroche
Simon Laroche on Google+
Simon Laroche on Twitter
Simon Laroche on Facebook
Simon Laroche on Pinterest
Simon Laroche on LinkedIn
: I am a Coder, Designer, Webmaster and Expert SEO Consulting, I'm also a wise traveller and an avid amateur photographer. I created the website TipoCode and many others such as Landolia: a World of Photos...

If you need help about this script, please leave a comment below. I reply as much as I can depending of my time, you may also get help from others.
I also offer a paid support, if you are in the need to adapt or create a script...

Leave a comment

Comments (0 comment)

No comments for the moment!