How do I write text in html and submit with onclick

Question

I'm having an issue here. I want to create a text box which I have done. But I want an onclick function too work with it. For example, If I were to type something in the text field and then clicked the 'click' button, I would want the text to appear on the white space of the site. Here is the current code:

<html>
<head>
    <title>The Worlds Story!</title>
</head>

<body>
    <h1>The Worlds Story</h1>
    <textarea name="message" rows="10" cols="30">
    Tell Your Story!
    </textarea>
<button onclick="myFunction()">Click me</button>
</body>
</html>

Please help. Thank you.

Voting to close since no code is provided, SO is not here to write code for free for random people, instead it's to help people who already have a partly working code but are stuck with a very specific problem to get it working. Feel free to come back after reading and **trying** something on your own. — Jonast92, Dec 14 '14 at 02:08
...or at least show the code that you already have to create the textbox. — nnnnnn, Dec 14 '14 at 02:11
I'm sorry I am not able to add my code. I literally just signed up a few minutes ago and am not familiar with how this website works:Tell Your Story! — Jelz Bellz, Dec 14 '14 at 02:15
@JelzBellz Go to the [help center](http://stackoverflow.com/help) to read about how Stackoverflow works. — Jonast92, Dec 14 '14 at 02:17

score 2 · Accepted Answer · answered Dec 14 '14 at 02:28

2

Without JQuery:

<!DOCTYPE html>
<html>
<head>
</head>
<body>

    <input id="inp"/>

    <p id="par">This is a paragraph.</p>

    <button id="btn1" onclick="document.getElementById('par').innerHTML =  document.getElementById('inp').value;">Change text</button>

</body>
</html>

Here is an example in JSFIDDLE: http://jsfiddle.net/weinerk/Ln73L2zp/

answered Dec 14 '14 at 02:28

weinerk

472
6
12

Notice that .innerHTML should be [avoided](http://stackoverflow.com/questions/18502238/why-is-it-suggested-to-avoid-innerhtml) and I recommend attaching event listeners instead of using the onclick property but it's good that you have something to work with now. – Jonast92 Dec 14 '14 at 02:37

weinerk · Answer 2 · 2014-12-14T02:17:59.593

-1

Try this:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").append( $("#inp").val() );
  });
});
</script>
</head>
<body>

    <input id="inp"/>

<p>This is a paragraph.</p>

<button id="btn1">Append text</button>

</body>
</html>

edited Dec 14 '14 at 02:17

answered Dec 14 '14 at 02:10

weinerk

472
6
12

1

I did not down-vote but notice that this question is not tagged with the jQuery tag. – Jonast92 Dec 14 '14 at 02:16
Down-voter, please add a comment explaining your vote so that this new user can understand what he must do to improve. – Jonast92 Dec 14 '14 at 02:16
I didn't downvote either, but I think this answer needs more explanation. The code shown _is_ straightforward, but the OP is a beginner. – nnnnnn Dec 14 '14 at 02:48

How do I write text in html and submit with onclick

2 Answers2