Question

I’m trying to learn how to use forms and jQuery together.

I’m trying to get text typed into a text form and append or insert it into another element

I’ve created a jsFiddle: http://jsfiddle.net/B9weu/5/

form some reason, the text that I’ve retrieved using .val() appears for a split second in the element it’s appending to, then it disappears. Why is this?

Am I on the right path in regards to utilizing forms by simply using .val() as a handler in the .submit() event?

the code:

    <form id="target">
   <div>
    <textarea id="blogentry" name="d" rows="8" cols="40">4</textarea>
  </div>
  <div>
    <input type="submit" name="g" value="Submit" id="g" />
  </div>
</form>

<script>
$('#target').submit(function() {
  var blogtext = $('#blogentry').val();
  $('#printbodytexthere').append('<p>' + blogtext + '</p>');
});
</script>

<div id="printbodytexthere">
</div>

Answer 1

Your form is being submitted (page refresh)

USE: event.preventDefault(); to prevent default submit behavior

$('#target').submit(function( e ) {
    e.preventDefault();
  var blogtext = $('#blogentry').val();
  $('#printbodytexthere').append('<p>' + blogtext + '</p>');
});

DOCS: http://api.jquery.com/event.preventDefault/