CODEWITHSUNDEEP
jquery
Lokathor
Lokathor

Reputation: 1014

jQuery button doesn't act on the live data

I want a very simple thing, to have an input and output text area, and then a button that makes javascript read the input area, then set the text of the output area in an appropriate way. I was told to use jQuery to do this, but it seems that the selection doesn't actually run each time the button is pressed.

My setup is like this:

<html>
<head><title>Example Input-Output</title></head>
<body>

<p><textarea id="inputArea" rows="7" cols="25">Input Text Here</textarea></p>
<p><button id="theButton" type="button">Activate</button></p>
<p><textarea id="outputArea" rows="7" cols="25">Output Text Here</textarea></p>

<script src="jquery.js"></script>

<script>
$(document).ready(function(){
    $("#theButton").click(function(event){
        var inputValue = $("#inputArea").text();
        $("#outputArea").text("input was:\n"+   inputValue);
    });
});
</script>

</body>
</html>

but when I click the button after having changed the text to anything other than the text it shows at page load, it still doesn't base the output on the current input text. I assume I'm making some dumb beginner's mistake?

Upvotes: 0

Views: 21

Answers (2)

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

Get using .val() instead of .text()

$("#inputArea").val();

DEMO

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388396

You need to use .val() to get the value of textarea not .text()

$(document).ready(function() {
  $("#theButton").click(function(event) {
    var inputValue = $("#inputArea").val();
    $("#outputArea").text("input was:\n" + inputValue);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>
  <textarea id="inputArea" rows="7" cols="25">Input Text Here</textarea>
</p>
<p>
  <button id="theButton" type="button">Activate</button>
</p>
<p>
  <textarea id="outputArea" rows="7" cols="25">Output Text Here</textarea>
</p>

Upvotes: 1

Related Questions