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
Hi, and welcome to Sitepoint!
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,
markbrown4:
Hi, and welcome to Sitepoint!
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').value;
}
</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 .
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!
comwwwdot:
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 .
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!
Sorry for this post I can’t edit my previous post to add this question.
Thanks for the big help!
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.
comwwwdot:
Thanks for the big help!
No problemo
comwwwdot:
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.
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! The best! :wavey: