event.preventDefault doesn't seem to work

Question

So im trying to stop a form from refreshing the page and this is the code i'm using:

$("#getName").submit(function(refresh) {
    refresh.preventDefault();
    $("#p22").fadeOut(50);
    $("#p23").fadeIn(800);
    document.getElementById("p23").innerHTML = "Oh " + userName + ", alright i wont forget that!";

})

I can't seem to get this working properly....

id = getName - is the form id

Answer 1

Your question is similar to: https://stackoverflow.com/a/6462306/986160

Try this:

$("#getName").submit(function(refresh) {
    $("#p22").fadeOut(50);
    $("#p23").fadeIn(800);
    $("#p23").html("Oh " + userName + ", alright i wont forget that!");
    return false;
})

By returning false is like refresh.preventDefault() and refresh.stopPropagation() together ;) See details here: https://stackoverflow.com/a/1357151/986160

Answer 2

I got this sample code of the jQuery documentation and it seems to work fine (it alert's but then doesn't link to destination.html. Everything seems fine in your code, it's probably something different you're looking for.

http://api.jquery.com/submit/

$( "#target" ).submit(function( event ) {
  alert( "Handler for .submit() called." );
  event.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="target" action="destination.html">
  <input type="text" value="Hello there">
  <input type="submit" value="Go">
</form>
<div id="other">
  Trigger the handler
</div>

Answer 3

Returning false will not validate your form and your page will not be refreshed.

$("#getName").submit(function(refresh) {
    refresh.preventDefault();
    $("#p22").fadeOut(50);
    $("#p23").fadeIn(800);
    document.getElementById("p23").innerHTML = "Oh " + userName + ", alright i wont forget that!";
    return false;
})