Jquery form field value

Question

How can I the HTML string <br> from this HTML FORM pass to the DIV using Jquery?

HTML FORM is:

<form action="" id="submit_wall" name="submit_wall" method="post">
<textarea cols="50" rows="5" id="message_wall"></textarea>
<button type="submit" id="fst" class="cfst">send</button>
</form>

 <div id="wall"></div>
 <div class="msg"></div>

Jquery code:

$(document).ready(function(){    
$("form#submit_wall").submit(function() {
var message_wall = $('#message_wall').attr('value');

$("div#wall").append('<div class=msg>'+ message_wall +'</div>');
return false; 
});
});

I'm trying using .html() but I keep getting error message.

Answer 1

Here is an example from learningjquery.com

$(document).ready(function() {
  $('#comment').one('focus',function() {
 $('#comment').parent().after('<div id="preview-box"><div class="comment-by">Live Comment Preview</div><div id="live-preview"></div></div>');
  });
  var $comment = ''; // that's two single quotation-marks at the end
  $('#comment').keyup(function() {
 $comment = $(this).val();
 $comment = $comment.replace(/\n/g, "<br />").replace(/\n\n+/g, '<br /><br />').replace(/(<\/?)script/g,"$1noscript");
 $('#live-preview').html( $comment );
  });
});

Which is very close of what you are trying to do.

Answer 2

First , as durilai commented, there is no div with an ID of wall , which means that even if your submit handler is working, append isn't going to append since there's nothing to append to.

Second , even though you said action="" on the form, the form will still submit and cause what looks like a page reload because you are not preventing the default action in your submit handler. One quick fix is to add return false; as the last line of the handler. Another fix is to rewrite it like:

$("form#submit_wall").submit(function(event) {
    event.preventDefault();

    $("div#wall").append("<div class='msg'>"+ $("#message_wall").val() + "</div>");
});