Javascript: User Input appearing on another Input box

Hi guys I need your help. I am currently working out a project.

On a single form, I need to capture the users input on this input box

<p> 
                <label for="Student ID">Student ID
                </label> 
                <input type="text" name="sesStudID" />
              </p>

to this input box

<p><label for="User Name">User Name</label><input type="text" name="sesUserName" disabled="disabled" /></p>

so as the user inputs to the first input box it will at the same time appear on the second input box.

I’m having a hard time doing my scripts for this…

Your help will be greatly appreciated :blush:

Hi, and welcome to Sitepoint! :slight_smile:

Firstly, the labels for attributes need to match the input’s id attribute - that’s how they are linked.
You just need to capture a key event in some way and then copy the values from one input to the other. The key events you can use are keydown, keyup and keypress:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>untitled</title>
</head>
<body>
<form action="/" method="get">
  <p> 
    <label for="sesStudID">Student ID</label> 
    <input type="text" name="sesStudID" id="sesStudID" />
  </p>
  <p>
    <label for="sesUserName">User Name</label>
    <input type="text" name="sesUserName" id="sesUserName" disabled="disabled" />
  </p>
</form>
<script type="text/javascript">
var sID = document.getElementById('sesStudID');
sID.onkeydown = function(event) {
  document.getElementById('sesUserName').value = document.getElementById('sesStudID');
}
</script>
</body>
</html>

All the best,

Oh yeah I miss that label… thanks :D. I’m not that really good in JavaScript I’m still trying to get myself use to it :nono:.
The time I implemented the script it gave me a " [object HTMLInputElement]" appearing on the input box.

Yet I was able to solve it though… I just added the value property on this line document.getElementById(‘sesUserName’).value = document.getElementById(‘sesStudID’); making it

  document.getElementById('sesUserName').value = document.getElementById('sesStudID');

Thanks for the big help! :smiley:

Sorry for this post I can’t edit my previous post to add this question.

Thanks for the big help! :smiley:

Follow up question, why is it that it’s delayed by one character every time I key-in a value. say for example i keyed-in 1 2 3, the time i pressed 3, 1 2 is the only thing that is displayed.

No problemo

It must be that the event is fired before the value is updated in the input. Try using a keyup event instead. You can also use the setTimeout funciton to delay it if that doesn’t work.

Oh there! It’s really now working! :smiley: The best! :wavey: