SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    May 2006
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    display text box input on same page

    Hi,
    I have a page which requests some input form the user, into a text box. Further down the page I want to display the text typed into the text box.

    Can anyone help me achieve this ? Thanks.

  2. #2
    SitePoint Wizard bronze trophy bigalreturns's Avatar
    Join Date
    Mar 2006
    Location
    The Wirral, England
    Posts
    1,294
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can have an empty span further down the page with an id set, i.e.
    <span id="textoutput"></span>
    You also need to have an id tag on your text input, with a call to a JS function using onkeyup, i.e.
    <input type="text" id="textinput" onkeyup="updateSpan(); return false;" />
    Then in your head javascript:
    Code:
    <script type="text/javascript">
    function updateSpan {
    document.getElementById('textoutput').innerHTML=document.getElementById('textinput').value;
    }
    </script>
    "The proper function of man is to live - not to exist."
    Get a Free TomTom


  3. #3
    SitePoint Enthusiast
    Join Date
    May 2006
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi big al,
    Thanks for the help.

    I tried the code and it doesn't seem to work ? Heres my page.

    <code>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <script type="text/javascript">
    function updateSpan {
    document.getElementById('textoutput').innerHTML=document.getElementById('textinput').value;
    }
    </script>
    </head>

    <body>
    <input type="text" id="textinput" onkeyup="updateSpan(); return false;" />
    <span id="textoutput"></span>

    </body>
    </html>

    </code>

  4. #4
    SitePoint Addict CommanderZ's Avatar
    Join Date
    Apr 2006
    Location
    Czech Republic
    Posts
    236
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have one extra space in the script

    This is ok
    Code:
    function updateSpan {
    document.getElementById('textoutput').innerHTML=document.getElementById('textinput').value;
    }

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2006
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    I tried that, it was justadded from pasting in the code I think. Still the same problem. Is this page working for you ?

    <code>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <script type="text/javascript">
    function updateSpan {
    document.getElementById('textoutput').innerHTML=document.getElementById('textinput').value;
    }
    </script>
    </head>

    <body>
    <input type="text" id="textinput" onkeyup="updateSpan();return false;" />
    <span id="textoutput"></span>

    </body>
    </html>
    </code>

  6. #6
    SitePoint Wizard bronze trophy bigalreturns's Avatar
    Join Date
    Mar 2006
    Location
    The Wirral, England
    Posts
    1,294
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry my mistake. You need to eliminate the space as suggested above, and make this change:
    function updateSpan {
    needs to become
    function updateSpan() {
    That's tested and working for me.
    "The proper function of man is to live - not to exist."
    Get a Free TomTom



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
  •