CODEWITHSUNDEEP
javascripthtml
Raúl Núñez Cuevas
Raúl Núñez Cuevas

Reputation: 838

Writing text on "div" using JavaScript

I'm having some trouble whenever I want to add some text to my div tag, here's my code:

<html>

<body>
<div id="comments">

</div>
<form name="forma">
<textarea name="commentUser" id="commentUser" cols="40" rows="5">
Comments here...
</textarea><br>
<input type="submit" value="Ready!" onClick="writeComment()" />
</form>

<script type="text/javascript" >

function writeComment()
    {
    var comment = document.forma.commentUser.value;
    alert(comment);

    document.getElementById('comments').innerHTML=comment;


    }


</script>
</body>

</html>

It does what it has to do correctly, but then it switches back to the text box only and the comment I just wrote disappears. Any idea of what's going on here?

Thank you so much for your time.

Upvotes: 18

Views: 75854

Answers (10)

George Bora
George Bora

Reputation: 1650

Or another option is to convert your submit into a button and take it out of the form, buttons can now exist outside of forms and from the code you pasted I don't see why you have to use a form, this will mean that your page isn't reloaded when you click on the "Ready" button.

Upvotes: 0

VirtualTroll
VirtualTroll

Reputation: 3091

you should switch
<input type="submit" value="Ready!" onClick="writeComment()" />
for
<input type="button" value="Ready!" onClick="writeComment()" />

Upvotes: 0

lukas.pukenis
lukas.pukenis

Reputation: 13597

This is because you use not just a regular button but a submit button which by default submits the form to the server. You can see that your comment is submitted via URL as you didn't specify the method(GET and POST and GET is default).

Simply write:

onclick="writeComment();return false;"

Returning FALSE prevents from default behaviour - submitting the form.

Upvotes: 1

DrStrangeLove
DrStrangeLove

Reputation: 11557

try <input type="button" value="Ready!" onClick="writeComment()" />

Upvotes: 0

Joe
Joe

Reputation: 82594

It is because you are submitting the form.

Quick fix: 

<input type="submit" value="Ready!" onClick="writeComment()" />

to

<input type="button" value="Ready!" onClick="writeComment()" />

In addition, you are able to prevent the default action of an input. Basically telling the browser the you are going to handle the action with preventDefault:

function writeComment(e) {
    var comment = document.forma.commentUser.value;
    alert(comment);

    document.getElementById('comments').innerHTML = comment;
    e.preventDefault();
    return false;
}

Upvotes: 18

Rafael Herscovici
Rafael Herscovici

Reputation: 17094

change this

<input type="submit" value="Ready!" onClick="writeComment()" />

to this:

<input type="submit" value="Ready!" onClick="writeComment(); return false;" />

Upvotes: 0

Joseph Silber
Joseph Silber

Reputation: 219930

You'll have to prevent your form from submitting:

<input type="submit" value="Ready!" onClick="writeComment(); return false;" />

Upvotes: 0

Paul
Paul

Reputation: 141839

When you click on the submit button the form is submitted, causing the whole page to reload. You need to return false from the onclick of the submit button to prevent it:

<input type="submit" value="Ready!" onclick="writeComment(); return false;" />

Or, if you don't want the button to ever submit the form change type="submit" to type="button".

PS. It's bad practice to use the onclick attribute. Instead bind a handler to the click event using pure JS.

Upvotes: 1

Daniel A. White
Daniel A. White

Reputation: 190925

Its making another request to the server, which is causing the page to be rendered again.

Just return false from writeComment.

Upvotes: 0

n8wrl
n8wrl

Reputation: 19765

What's happening is your form is submitting, the page is refreshing, and the div is going back to its pre-JavaScript-set content.

Try swapping the type='submit' to 'button' on the button.

Upvotes: 5

Related Questions