Writing text on "div" using JavaScript

Question

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.

Joe · Accepted Answer · 2011-08-25 19:10:33Z

18

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;
}

answered Aug 25, 2011 at 19:10

Joe

82.8k18 gold badges130 silver badges147 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Blaszard Over a year ago

Does this method strip all HTML elements? If you want to send a text that is <div>X</div><br/><div class='flight'></div>, the element can't receive the text as it is?

n8wrl · Accepted Answer · 2011-08-25 19:09:45Z

5

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.

answered Aug 25, 2011 at 19:09

n8wrl

19.9k4 gold badges70 silver badges106 bronze badges

Comments

Paul · Accepted Answer · 2011-08-25 19:10:02Z

1

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.

answered Aug 25, 2011 at 19:10

Paul

142k28 gold badges285 silver badges272 bronze badges

3 Comments

Rafael Herscovici Over a year ago

even due you are right about it being a bad practice, clearly the OP is a newbie to JS and asking him to do so, well, it will just make him more confused.

Paul Over a year ago

@Dementic Just letting him know. It's never to early to start using good practices. I don't think it's any more confusing to bind an event handler to an element than to use an onclick attribute.

Rafael Herscovici Over a year ago

My mom told me, when i was really little, that i need to learn to walk before i can run. ;)

lukas.pukenis · Accepted Answer · 2011-08-25 19:13:02Z

1

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.

answered Aug 25, 2011 at 19:13

lukas.pukenis

13.7k13 gold badges50 silver badges83 bronze badges

Comments

Daniel A. White · Accepted Answer · 2011-08-25 19:09:50Z

0

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

Just return false from writeComment.

answered Aug 25, 2011 at 19:09

Daniel A. White

192k49 gold badges389 silver badges473 bronze badges

1 Comment

Paul Over a year ago

returning false from writeComment won't do anything unless he changes his onclick to return writeComment(); He needs to return false from the onclick.

Joseph Silber · Accepted Answer · 2011-08-25 19:10:07Z

0

You'll have to prevent your form from submitting:

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

answered Aug 25, 2011 at 19:10

Joseph Silber

221k59 gold badges369 silver badges292 bronze badges

Comments

Rafael Herscovici · Accepted Answer · 2011-08-25 19:10:24Z

0

change this

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

to this:

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

answered Aug 25, 2011 at 19:10

Rafael Herscovici

17.2k19 gold badges68 silver badges94 bronze badges

1 Comment

Rafael Herscovici Over a year ago

btw, James hill is right, if you will want to add more then one comment, you will have to do +=

DrStrangeLove · Accepted Answer · 2011-08-25 19:11:14Z

0

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

answered Aug 25, 2011 at 19:11

DrStrangeLove

11.6k16 gold badges63 silver badges73 bronze badges

Comments

VirtualTroll · Accepted Answer · 2011-08-25 19:13:19Z

0

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

answered Aug 25, 2011 at 19:13

VirtualTroll

3,1091 gold badge32 silver badges48 bronze badges

Comments

George Bora · Accepted Answer · 2013-02-23 07:59:35Z

0

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.

answered Feb 23, 2013 at 7:59

George Bora

1,6506 gold badges27 silver badges45 bronze badges

Collectives™ on Stack Overflow

Writing text on "div" using JavaScript

10 Answers 10

1 Comment

Comments

3 Comments

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

1 Comment

Comments

3 Comments

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related