www.webdeveloper.com
Results 1 to 12 of 12

Thread: javascript input return

  1. #1
    Join Date
    Apr 2012
    Posts
    15

    javascript input return

    I need to have a textarea where i can write something. A button. Then another textarea for the answer to appear. For example if someone writes "Hello", they press the button and "Bonjour" appears in the other text area. But without the first textarea and submit button disappearing.

    Thanks

  2. #2
    Join Date
    Sep 2010
    Posts
    68
    This may get you started:

    <center><textarea name="data" cols="10" rows="50" maxlength="500"></textarea></center>
    <br /><input name="Button1" type="button" value="button" />
    <br />
    <center><textarea name="previousdata" cols="10" rows="50" maxlength="500" readonly="readonly"></textarea></center>

  3. #3
    Join Date
    Apr 2012
    Posts
    15
    I can do all that. At the moment i have
    HTML Code:
    <!DOCTYPE html>
    <html>
    <body>
    
        <textarea id="test" cols="20" name="S1" rows="2"></textarea>
    
    <button onclick="myFunction()">Submit</button>
    
    
    <script type="text/javascript">
        function myFunction() {
            var x = "";
            if (document.getElementById("test").innerHTML = "Hello") {
                document.write("<p>Bonjour</p>"); 
            }
            else {
                document.write("<p>Nothing Entered</p>");
            }
            
        }
    </script>
        <textarea id="answer" cols="20" name="S2" rows="2"></textarea>
    </body>
    </html>
    but when i input "Hello", instead of the whole thing appearing and "Bonjour", appearing. i want "Bonjour" to appear in the other textarea. I also still want to functionality to still be there multiple times.

  4. #4
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,270
    At first, document.getElementById("test").innerHTML = "Hello" is not a condition (==) but an assignment !

    Then, document.write open a new document when the document is closed ! Use it only at the opening but never in a function !

  5. #5
    Join Date
    Apr 2012
    Posts
    15
    so what would i do then?

  6. #6
    Join Date
    Mar 2011
    Posts
    1,148
    On a good day, all of these form elements would actually reside in a <form></form> block, so I added the "return false;" in case you ever implement this in a real form with an 'action' attribute. And I moved the <script> out of the <body> where you should usually insert such code unless it needs to be executed when the page is rendered.

    In any case, try:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript">
        function myFunction() {
            var x = "";
            if (document.getElementById("test").innerHTML = "Hello") {
                document.getElementById("answer").innerHTML = "Bonjour"; 
            }
            else {
                document.getElementById("answer").innerHTML = "Nothing Entered";
            }
           return false;
        }
    </script>
    </head>
    <body>
    
        <textarea id="test" cols="20" name="S1" rows="2"></textarea>
        <button onclick="return myFunction();">Submit</button>
        <textarea id="answer" cols="20" name="S2" rows="2"></textarea>
    </body>
    </html>

  7. #7
    Join Date
    Sep 2010
    Posts
    68
    Do not forget to save to the Textbox "answer"!

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript">
        function myFunction() {
            var x = "";
            if (document.getElementById("test").innerHTML = "Hello") {
                document.getElementById("answer").innerHTML = "Bonjour"; 
            }
            else {
                document.getElementById("answer").innerHTML = "Nothing Entered";
            }
           return false;
        }
    </script>
    </head>
    <body>
    
        <textarea id="test" cols="20" name="test" rows="2"></textarea>
        <button onclick="return myFunction();">Submit</button>
        <textarea id="answer" cols="20" name="answer" rows="2"></textarea>
    </body>
    </html>

  8. #8
    Join Date
    Apr 2012
    Posts
    15
    this does not full work, if I just press the submit without typing anything into the boxes both "Bonjour" and "Hello" appears in their respective textareas.

  9. #9
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,270
    Obviously, your test line assign the value "Hello" to the "text" textarea. This non zero value is true and the value "Bonjour" is assigned to the second textarea !
    Change the = sign with a == to compare the two value like this.
    Code:
            if (document.getElementById("test").innerHTML == "Hello"){
            document.getElementById("answer").innerHTML = "Bonjour"; 
            }
            else {
                document.getElementById("answer").innerHTML = "Nothing Entered";
            }
    }

  10. #10
    Join Date
    Apr 2012
    Posts
    15
    At the moment i have
    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript">
        function myFunction() {
            var x = "";
            if (document.getElementById("test").innerHTML == "Hello"){
            document.getElementById("answer").innerHTML = "Bonjour"; 
            }
            else {
                document.getElementById("answer").innerHTML = "Nothing Entered";
            }
    }
            
    </script>
    </head>
    <body>
    
        <textarea id="test" cols="20" name="test" rows="2"></textarea>
        <button onclick="return myFunction();">Submit</button>
        <textarea id="answer" cols="20" name="answer" rows="2"></textarea>
    </body>
    </html>
    But when i press submit with "Hello" entered, the output is "Nothing Entered". Also i need this to work multiple times without refreshing the page. e.g. press submit without anything entered, "Nothing Entered" appears, then i type in "Hello", and press submit "Bonjour" appears in the other textarea. Thanks

  11. #11
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,270
    You have probably to take care with spaces, tabs or carriage returns in the textarea ! Then it could be better to remove all this characters before to make the test with something like this.
    Code:
           var x =document.getElementById("test").value;
           y = x.replace(/(^\s|\s$)/g,'');
           if (y == "Hello") {
                  // do something
           }
           else {
                  // do other thing
           }

  12. #12
    Join Date
    Apr 2012
    Posts
    15

    resolved

    thanks thats got most of the problems sorted.

Thread Information

Users Browsing this Thread

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

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