SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question 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

    HTML Code:
    <p> 
                    <label for="Student ID">Student ID
                    </label> 
                    <input type="text" name="sesStudID" />
                  </p>
    to this input box

    HTML Code:
    <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

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    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:

    Code javascript:
    <!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,

  3. #3
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Quote Originally Posted by markbrown4 View Post
    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:

    Code javascript:
    <!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 . 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

    HTML Code:
      document.getElementById('sesUserName').value = document.getElementById('sesStudID');
    Thanks for the big help!

  4. #4
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by comwwwdot View Post
    Oh yeah I miss that label... thanks . 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

    HTML Code:
      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.

  5. #5
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by comwwwdot View Post
    Thanks for the big help!
    No problemo
    Quote Originally Posted by comwwwdot View Post
    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.

  6. #6
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking

    Quote Originally Posted by markbrown4 View Post
    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! The best!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •