Adding text to a paragraph using .val()

Question

I am trying to change the text inside a paragraph whenever a submit button is clicked. For some reason it doesn't work. I tried finding answers in other questions but couldn't. Why isn't this working?? Javascript code:

var $submit = $('input:submit');
$submit.click(function(){
    var $newText = $('input:text').val();
    var $p = $('#newStatus');
    $p.text($newText);
});

Html:

<div class = "grid_12">
  <form>
    <input type="text" name="status">
    <input type="submit" name="submit" value = "Post">
  </form>
  <p id = "newStatus"></p>
</div>

Thanks!

Answer 1

That's because the form is submitted, prevent the default action of the event:

$submit.click(function(e){
   e.preventDefault();

Answer 2

Try this:

var $submit = $('input:submit');
$submit.click(function(){
    var $newText = $('input:text').val();
    var $p = $('#newStatus');
    $p.text($newText);
    return false;   // prevent form from being submitted
});

Actually your forms gets submitted, so we need to stop that.

FIDDLE DEMO