CODEWITHSUNDEEP
jqueryinput
nevos
nevos

Reputation: 927

Adding text to a paragraph using .val()

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!

Upvotes: 2

Views: 423

Answers (2)

Ram
Ram

Reputation: 144689

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

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

Upvotes: 5

palaѕн
palaѕн

Reputation: 73906

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

Upvotes: 4

Related Questions