JQuery does not find textarea value

Question

I have a textarea in my HTML file, and I want to send its content to the console. Here the code:

<p class="i_link">Link:</p>
<textarea name="link" id="Story_Link" cols="100" rows="1"></textarea><br>
<!--!name-->
<p class="i_name">Name:</p>
<textarea name="name" id="Story_Name" cols="50" rows="1"></textarea><br>
<!--!number-->
<p class="i_number">Number:</p>
<textarea name="number" id="Story_Number" cols="1" rows="1"></textarea><br>
<!--!author-->
<p class="i_author">Author:</p>
<textarea name="author" id="Story_Author" cols="50" rows="1"></textarea><br>
<button onclick="myFunction()">Click me</button>
​
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
​
<script>
function myFunction() {
   console.log('hello ' + $('i_link').val())
}
</script>

But it prints out hello undefined to the console. I expected to get the value of my textarea instead of undefined.

How to get the expected output?

Answer 1

Replace your line

console.log('hello ' + $('i_link').val())

with

console.log('hello ' + $('#Story_Link').val())

---

You tried to get the value from a <p> tag and you missed the . class selector.

My solution will lookup for your Story_Link textarea I used the hash sign for finding that textarea by id.

Here you will find more information about how to find elements in HTML DOM with jquery:

• Select elements by class https://api.jquery.com/class-selector/
• Select elements by id https://api.jquery.com/id-selector/
• Every kind of selectors in jquery https://api.jquery.com/category/selectors/

---

Here I got you a working example:

 function myFunction() { console.log('hello ' + $('#Story_Link').val()) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p class="i_link">Link:</p> <textarea name="link" id="Story_Link" cols="100" rows="1"></textarea><br> <:--:name--> <p class="i_name">Name:</p> <textarea name="name" id="Story_Name" cols="50" rows="1"></textarea><br> <!--!number--> <p class="i_number">Number:</p> <textarea name="number" id="Story_Number" cols="1" rows="1"></textarea><br> <!--!author--> <p class="i_author">Author:</p> <textarea name="author" id="Story_Author" cols="50" rows="1"></textarea><br> <button onclick="myFunction()">Click me</button>

Answer 2

Your issue is that you haven't supplied a CSS selector to the jQuery object that matches an element and so it's not finding any element to get the value of. If you are trying to get the Author name, you need to pass #Story_Author because that is the id of the textarea where that data is entered.

 <p class="i_link">Link:</p> <textarea name="link" id="Story_Link" cols="100" rows="1"></textarea><br> <:--:name--> <p class="i_name">Name:</p> <textarea name="name" id="Story_Name" cols="50" rows="1"></textarea><br> <:--.number--> <p class="i_number">Number.</p> <textarea name="number" id="Story_Number" cols="1" rows="1"></textarea><br> <.--.author--> <p class="i_author">Author.</p> <textarea name="author" id="Story_Author" cols="50" rows="1"></textarea><br> <button onclick="myFunction()">Click me</button> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script> function myFunction() { console.log('hello ' + $('#Story_Author').val()) } </script>

But, you have quite a few issues beyond that.

jQuery is a powerful JavaScript library that can make doing very complex things much simpler. When it was first introduced, the core JavaScript language as well as the DOM API weren't as mature as they are now and so even relatively simple queries in "vanilla" JavaScript were cumbersome. That's not the case any longer and, as such, the need for jQuery to do these trivial tasks is gone. For what you are doing, jQuery is only making things more complex. Here's all you need to do this without jQuery:

 <p class="i_link">Link:<br> <input id="Story_Link"></p> <p class="i_name">Name:<br> <input id="Story_Name"></p> <p class="i_number">Number:<br> <input id="Story_Number"></p> <p class="i_author">Author:<br> <input id="Story_Author"></p> <button>Click me</button> <script> // Get references to any elements you'll reference more than once, just once const link = document.getElementById("Story_Link"); const name = document.getElementById("Story_Name"); const number = document.getElementById("Story_Number"); const author = document.getElementById("Story_Author"); // Do your event binding in JavaScript, not HTML document.querySelector("button").addEventListener("click", function(){ console.log('Hello ' + author.value + " Here are your details:"); console.log("\tStory Link: " + link.value); console.log("\tStory Name: " + name.value); console.log("\tStory Number: " + number.value); }); </script>

As you'll see from above, the HTML is much simpler, there's no need to reference jQuery, and the pure JavaScript is also very simple.

Additionally:

• A <textarea> is used for multi-line input. When you just have a short string to collect, <input> is the correct element to use.
• type="text/javascript" has not been needed in script elements for quite a few years now.
• You really shouldn't end your paragraphs and then have related content below them that uses a break to separate itself from the next paragraph. Paragraphs are for complete thoughts. See the updated HTML in the above answer.

Answer 3

Change your script code to following

<script>
function myFunction() {
   console.log('hello ' + $('#Story_Author').val())
}
</script>

notice that. in $('._link) while using jquery you have to pass selector of class or id for class you have to add. at start and for id you have to add # at the start

example: to select element with id myId

$('#myId')

to select element with class myClass

$('.myClass')

Also, the p tag in HTML does not have a value attached to it if you want to get value in the textarea you should select the id of the testarea

Answer 4

You want to get value/text from textarea, so you have to write:

$('#Story_Link').val()