www.webdeveloper.com
Results 1 to 2 of 2

Thread: print text from textbox to the same page

  1. #1
    Join Date
    May 2012
    Posts
    1

    print text from textbox to the same page

    I wanted to get text from a textbox to display on the same screen. This is the code i have used but it doesn't seem to work. The text prints to the screen but the textbox disappears and I cant enter anything else.
    Any help?

    <html>
    <script language='JavaScript'>


    function getwords()
    {
    textbox = document.getElementById('words');
    if (textbox.value != "")
    document.write("You entered: " + textbox.value)
    else
    alert("No word has been entered!")
    }

    </script>
    <input type="text" id="words" />
    <input type="button" onclick="getwords()" value="Enter" />

    </body>
    </html>

  2. #2
    Join Date
    May 2011
    Location
    Lancashire
    Posts
    35
    Hi, try usng the innerHTML property

    first create your output div in the body (i.e. <div id="output"> Leave blank here </div>

    Then in your function get create a variable that accesses the output div (i.e. var myOutput=document.getElementById('output').
    Then instead of using the document.write method, just use myOutput.innerHTML="You entered: " + textbox.value;

    in a nutshell:
    <html>
    <script language='JavaScript'>


    function getwords(){
    myOutput=document.getElementById('output');
    textbox = document.getElementById('words');
    if (textbox.value != "")

    myOutput.innerHTML="You entered: " + textbox.value;
    else
    alert("No word has been entered!")
    }

    </script>
    <input type="text" id="words" />
    <input type="button" onclick="getwords()" value="Enter" />
    <div id="output">
    </div>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles