convert javascript array into textarea

Question

just teaching myself javascript and im trying to get my code to read in inputs from the user and then print them out into a text area but i have been unsuccessful thus far.

so far im just using the alert just to test that my code is storing the input in the array i ve set.

<HTML>
  <HEAD>
    <TITLE>Test Input</TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    var TestVar = new Array();

    var i = 0;
    function testResults (form) {
        TestVar[i] = form.inputbox.value;
        alert ("You typed: " + TestVar[1]);
        i++;

    }
    </SCRIPT>
  </HEAD>
  <BODY>
    <FORM NAME="myform" ACTION="" METHOD="GET">Enter a name into the box: <BR>
      <INPUT TYPE="text" NAME="inputbox" VALUE=""><P>
      <INPUT TYPE="button" NAME="button" Value="Click"
       onClick="testResults(this.form)">

      <form name="myform" action="" method="POST">
        <div align="center">

        <textarea cols="40" rows="5" name="output">'Now we are inside the area - which is nice.' this.TestVar[i];</textarea>
      </FORM>
  </BODY>
</HTML>

I know its basic, but i cant seem to get it right, thanks for any help givin.

Azodious · Accepted Answer · 2012-09-24 05:18:35Z

1

The alert call should be written as follows

alert ("You typed: " + TestVar[i]);

In place of i you have written 1.

and, before doing i++, add following line:

form.output.value += TestVar[i];

Now, you are changing the contents of textarea dynamically.

answered Sep 24, 2012 at 5:18

Azodious

13.9k1 gold badge41 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Yograj Gupta · Accepted Answer · 2012-09-24 05:18:50Z

1

Update your statement

alert ("You typed: " + TestVar[1]); // Here you are passing 1, which is telling to get value at index 1.

to

alert ("You typed: " + TestVar[i]);  //You are storing at i index so get it again from i index.

answered Sep 24, 2012 at 5:18

Yograj Gupta

9,8673 gold badges31 silver badges50 bronze badges

Comments

Jimm · Accepted Answer · 2012-09-24 05:33:20Z

Ok, i just went ahead to fix something up...minor corrections in your sample. (and some edits to satisfy my syntax specific eyes) I used jQuery. (use native JS incase you don't want to use it)

var TestVar = new Array();
function testResults(form) {
   TestVar.push(form.inputbox.value);
   $("#outputTa").val(TestVar);
}

The form is just the same, just added an Id="outputTa" to the textarea

<form name="myform" action="" method="GET">
Enter a name into the box:
<br>
<input type="text" name="inputbox" value=""><p>
    <input type="button" name="button" value="Click" onclick="testResults(this.form)">
    <form name="myform" action="" method="POST">
    <div align="center">
        <textarea cols="40" rows="5" id="outputTa" name="output"></textarea>
    </form>

CRDave · Accepted Answer · 2012-09-24 05:21:08Z

0

<SCRIPT LANGUAGE="JavaScript">

    function testResults (form) {
        TestVar= form.inputbox.value;
        alert ("You typed: " + TestVar);
    }
    </SCRIPT>

answered Sep 24, 2012 at 5:21

CRDave

9,2475 gold badges43 silver badges59 bronze badges

Comments

Anshu · Accepted Answer · 2012-09-24 05:22:44Z

This is what you want to do.. I have used jQuery, you can remove jQuery and use native javascript..

HTML:

<HTML>
<BODY>
<FORM id="myform" NAME="myform" ACTION="" METHOD="GET">Enter a name into the box: <BR>
<INPUT id="inputbox" TYPE="text" NAME="inputbox" VALUE=""><P>
<INPUT id="clickBtn" TYPE="button" NAME="button" Value="Click">
<form name="myform" action="" method="POST">
<div align="center">

<textarea id="textarea" cols="40" rows="5" name="output">

</textarea>
</FORM>
</BODY>
</HTML>

Javascript:

$("#clickBtn").click(function(){
    var form = $("#myform");

    $("#textarea").val($("#textarea").val() + $("#inputbox").val());
});

JSFiddle link

Apurv · Accepted Answer · 2012-09-24 05:28:34Z

<HTML>
  <HEAD>
    <TITLE>Test Input</TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    var TestVar = new Array();

    var i = 0;
    function testResults (form) {
     //   alert(form)
        TestVar[i] = form.elements[0].value
          var tempValue= document.getElementById("txtArea").value;
          document.getElementById("txtArea").value=tempValue + TestVar[i];
        }
    </SCRIPT>
  </HEAD>
  <BODY>
    <FORM NAME="myform" ACTION="" METHOD="GET">Enter a name into the box: <BR>
      <INPUT TYPE="text" NAME="inputbox" VALUE=""><P>
      <INPUT TYPE="button" NAME="button" Value="Click"
       onClick="testResults(this.form)">

      <form name="myform" action="" method="POST">
        <div align="center">

        <textarea id="txtArea" cols="40" rows="5" name="output"></textarea>
      </FORM>
  </BODY>
</HTML>

David · Accepted Answer · 2012-09-24 06:20:56Z

Here's a solution for you:

<html>
<head>
<title>Test Input</title>
<script language="JavaScript">
var TestVar = new Array();
var i = 0;
function testResults() {
    TestVar[i] = document.getElementById("userinput").value;

    var textAreaOutput = document.getElementById("output");
    textAreaOutput.value += TestVar[i]
    i++;
}
</script>
</head>
<body>

<form id="inputForm" name="inputForm" action="" method="GET">Enter a name into the box: <br/>
    <INPUT TYPE="text" name="inputbox" value="" id="userinput"/><p/>
    <INPUT TYPE="button" name="button" Value="Click" onClick="javascript:testResults(this.form);"/>
</form>

<form id="outputForm" name="outputForm" action="" method="POST">
    <div align="center">
        <textarea cols="40" rows="5" id="output" name="output">'Now we are inside the area - which is nice.' </textarea>
    </div>
</form>

</body>
</html>

Please note a couple things:

You had two tags with the exact same name, "myform". Also, your form definitions were not valid HTML because you had two open tags and only one closing tag.
By adding an "id" attribute to tags it becomes possible to reference them using document.getElementById(). This is a very precise and convenient way to select a tag.

Learning native Javascript is certainly a good thing. Do take a look at jQuery and other Javascript libraries, too, though. Selecting and manipulating tags is a lot easier and more convenient in jQuery than it is in native Javascript.

Have fun!

Collectives™ on Stack Overflow

convert javascript array into textarea

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Related