Question

This is probably very simple but I seem to be running around in ever decreasing circles…

I’m developing a webpage for our payroll area and…

Q. Is it possible to have two text input fields that update each other automatically and will work in both directions. i.e one will update the other and vica-versa depending on input

What I’m after here…

Employees current salary is entered into a text input

Payroll can then enter data into one of two text inputs (New Salary or Percentage Increase)

Entering a New salary will automatically update Percentage Increase or
Entering a Percentage Increase will automatically update the New Salary field

The whole idea is to allow payroll to use either percentage or actual salary to
come up with the new figure

Thanks
Frankie G

Answer 1

Here’s a really basic implementation with no validation that the entered values are numeric:

window.onload = function() {    
    var currentSal = document.getElementById("current"),
        percentInc = document.getElementById("percent"),
        newSal = document.getElementById("new");

    percentInc.onkeyup = function() {
        newSal.value = currentSal.value * (1 + percentInc.value / 100);
    };
    newSal.onkeyup = function() {
        percentInc.value = (newSal.value - currentSal.value) / currentSal.value * 100;
    };    
};​

This assumes your html markup uses the element ids “current”, “percent” and “new”, but obviously you can change these. On any keyup within the percentage increase or new salary fields just do the appropriate calculation and update the other field. The whole thing is in an onload event for the page so that document.getElementById() can find the elements – you could, instead, put it in a script block at the end of the page (though having all contained in a function like that keeps the variables out of the global scope).

Demo: http://jsfiddle.net/5pDdM/