These days, it is common to have an autoupdate on fields where one section is either the result of given choices or it displays a given image or text block. One example of this is having a password strength calculation; for example, searching for "currency converter" on Google will result in a box where you can do currency conversion between USD and EUR. Linking fields in this way makes sense when we have two or more that are logically linked, or when one is a result form of the other.
To demonstrate this, we will create a converter for temperature where updating one of the fields will result in changes in the other, as the values are linked.
For this recipe, we only need a basic knowledge of jQuery and a simple formula to convert the temperatures between Celsius and Fahrenheit and vice versa:
Celsius = (Fahrenheit -32) x (5/9)
Or:
Fahrenheit = Celsius x(9/5) +32
First, we are going to create the HTML part and create two input fields that will get autoupdated and add the appropriate labels:
<div> <label for='celsius'>C°</label> <input id='celsius' type='text' /> = <label for='fahrenheit'>F°</label> <input id='fahrenheit' type='text' /> </div>
Afterwards, we have to make sure that we have included jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"> </script>
Following this, we can add the script that will handle the binding between the fields:
$(document).ready(function() { $('#celsius').keyup(function(data) { var celsius = new Number(data.currentTarget.value); var farenheit =celsius *(9/5) + 32; $('#farenheit').val(farenheit); }); $('#farenheit').keyup(function(data) { var farenheit = new Number(data.currentTarget.value); var celsius =(farenheit-32)*(5/9); $('#celsius').val(celsius); }); });
This will connect and automatically calculate the temperature back and forward.
Let's first take a look at the display part where there is nothing specific; here we use a simple input type text and add the appropriate labels for each field. Furthermore, we can use the escaped character ° that will show the degree character.
If we take a look at the jQuery keyup event, we can see that it's executed when a user releases a key on the keyboard on a given element. This event can be attached on any HTML element, but it will only work when the element is in focus; so it mostly makes sense to use it on input elements. As the keyup event has an option to execute a function that will accept the event object, so for our case, it is as follows:
$('#celsius').keyup(function(event) {In the event object, we can access the element that fired the event and access its value:
event.currentTarget.value
After that, we can do the calculation (celsius *(9/5) + 32) and set the result as a value to the other element that displays it in Fahrenheit:
$('#fahrenheit').val(fahrenheit);As we wanted the binding to work both ways, we can do the same on the input field for Fahrenheit:
$('#farenheit').keyup(function(event) {And of course, you need to use the appropriate formula (fahrenheit-32)*(5/9)) for returning back to Celsius.
While this recipe shows a simple use of jQuery event to make an instant update on input text, it can also be applied for creating autocomplete boxes or features, such as Google's instant search. The idea here is that we can and should use one- or two-way binding for various HTML elements, especially when we are talking about derived data or data that is a representation of the same source.