Website forms: Use Javascript to auto fill one field with the values from two other fields

Here is the simple Javascript code that I use to auto fill one field of a form with the values of one or more other fields.

Copy and paste this line to the of your web page:


<code><script type="text/javascript" charset="utf-8">     
function updateUsername(){         
first = document.getElementById("first").value;         
last = document.getElementById("last").value;         document.getElementById("username").value = first+" "+last;     
} </script></code>


Next, you simply need to add the correct ID to the three fields in your form. Make sure that the IDs correspond correctly to the Javascript code we just pasted into the header.

For example:

<code><input type="text" name="some_name" value="" id="first" onkeyup="updateUsername();"> 
<input type="text" name="some_name" value="" id="last" onkeyup="updateUsername();"> 
<input type="text" name="some_name" value="" id="username"></code>

As you can see, you also need to add this line of code to the field or fields whose value(s) you want to fill the third field:


And that is all that you need to do. Let me know if you have any questions or run into any issues.

Meet the author

Libby Fisher is an experienced freelance web developer, recently relocated from Seattle to Boston, and passionate about developing websites that are both aesthetically appealing and intuitively usable - or as she prefers: "beautifully effective."