How to obtain the value of a text area in javascript

Question

I am trying to obtain the value of a specific text area on a form, in a separate javascript file.

I have tried code specified in this stackoverflow link: Get textarea by name attribute

however I still obtained null, as the output.

my code is here as follows:

 <td>
  <textarea name="key_input" rows="4" cols="50">
    testData
  </textarea>
 </td>

and in my js:

var key_Data = document.getElementById("key_input").value;

this is another way I have tried to obtain the key_input data, but I am still unsuccessful.

Any help would be much appreciated Thanks in advance.

getElementById will get an object by "id", not by "name", so no element will be found in your code. — Chris Dixon, Feb 25 '19 at 11:51
If you wondered why the code from the linked SO question did not work for you, that question was about using the jQuery library (which extends javascript). If you're not using that library, that style of code will not work on your page. — Cat, Feb 25 '19 at 11:58
@Cat I thought the same, but then it's odd that the OP has tagged jQuery in this question. You'd assume in that case they were using it. — Rory McCrossan, Feb 25 '19 at 12:02

score 2 · Accepted Answer · answered Feb 25 '19 at 12:02

You are searching for an Id that doesn't exist, change name to id.

id="key_input"

And also, just creating the var doesn't show it.

var key_Data = document.getElementById("key_input").value;
console.log(key_Data);

<td>
  <textarea id="key_input" rows="4" cols="50">
    testData
  </textarea>
 </td>

score 1 · Answer 2 · answered Feb 25 '19 at 11:53

1

Use document.querySelector('[name="key_input"]'):

console.log(document.querySelector('[name="key_input"]').value);

<td>
  <textarea name="key_input" rows="4" cols="50">
    testData
  </textarea>
 </td>

answered Feb 25 '19 at 11:53

jo_va

13,504
3
23
47

score 0 · Answer 3 · answered Feb 25 '19 at 11:53

You can add an specific id attribute to your textarea element and use Document.querySelector():

const textareaElem = document.querySelector('#key_input');

console.log(textareaElem.value)

<textarea id="key_input" name="key_input" rows="4" cols="50">
    testData
</textarea>

score 0 · Answer 4 · answered Feb 25 '19 at 11:54

You can use jquery to do it simply

console.log($('#key_input').val())

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td>
  <textarea name="key_input" rows="4" cols="50" id="key_input">
    testData
  </textarea>
 </td>

score 0 · Answer 5 · answered Feb 25 '19 at 11:54

0

include the attribute "id" on your text area element

<td>
  <textarea name="key_input" id="key_input" rows="4" cols="50">
    testData
  </textarea>
 </td>

and your js

var key_Data = document.getElementById("key_input").value;

answered Feb 25 '19 at 11:54

Seloka

345
1
6
20

score 0 · Answer 6 · answered Feb 25 '19 at 11:56

function test(){
   alert(document.getElementsByName("key_input")[0].value)
  }

<textarea name="key_input" rows="4" cols="50">
    testData
  </textarea>
  <input type="button" onclick="test()" value="get data" />

you can use the above code for textarea value get by it's name

How to obtain the value of a text area in javascript

6 Answers6