javascript - Displaying textarea content on click of button - Stack Overflow

admin管理员组

文章数量:1429428

I am having a text area and a button.Like this :

<textarea id="txtarea"></textarea>
<input type="button" value="add text" id="add" />

Now,what i want to do is that on click of the button that text to be displayed on the same page above this text area just like we do ment or answer a question on stackoverflow.

How this can be done ?Please help.

I am having a text area and a button.Like this :

<textarea id="txtarea"></textarea>
<input type="button" value="add text" id="add" />

Now,what i want to do is that on click of the button that text to be displayed on the same page above this text area just like we do ment or answer a question on stackoverflow.

How this can be done ?Please help.

• javascript
• jquery
• ajax

Share Improve this question Follow asked Apr 27, 2014 at 11:23 user3522121user3522121 21533 gold badges1010 silver badges2424 bronze badges 4

• 1 Please try something before asking other dude to code it for you. Why don't you read some basic tutos?! – A. Wolff Commented Apr 27, 2014 at 11:25
• yea dude atleast do the click handler here – Wilmer Commented Apr 27, 2014 at 11:27
• @A.Wolff I had basic knowledge but here in this case i dont know were to get started. – user3522121 Commented Apr 27, 2014 at 11:28
• Try not to post code based questions – ArmaGeddON Commented Apr 27, 2014 at 11:28

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

you can do this using javascript
add any tag before (generally div or span tag is used) textarea tag

<div id="adduserdata"></div>
<textarea id="txtarea"></textarea>
<input type="button" value="add text" id="add" onclick="showtext()" />

Javascript code would be

function showtext(){
 var text = document.getElementById("txtarea");
 var showarea = document.getElementById("adduserdata");
 showarea.innerHTML=text.value;
}

here is working example

As what you want, thus appending to the <div> division element, I assume that you will accept this answer (as a summary to all the ments and answers above) :

<!-- This is the HTML Part -->
<div id="text"></div>
<textarea id="new"></textarea>
<input type="button" onclick="appendTextToDiv();" />
<script>
    function appendTextToDiv(){document.getElementById("text").innerHTML = document.getElmentById("text").innerHTML + document.getElementById("new").value;}
</script>

This can let you simply append it to the text. Fiddle

This will do if using Jquery (and previously text will stay) :

$('.button').click(function(){
var text = $('textarea').val();
if(text!=''){
$('p').text(text);
}
});

or like this:

$('.button').click(function(){
var text = $('textarea').val();
if(text!=''){
$('<p></p>').text(text).insertBefore('textarea');
}
});

Fiddle

本文标签： javascriptDisplaying textarea content on click of buttonStack Overflow