jQuery Submit Refreshing Page jQuery Submit Refreshing Page ajax ajax

jQuery Submit Refreshing Page


It could be your JavaScript is failing, so the default behaviour is being executed.

Try to examine the XHR in a tool like Firebug.

Also, you could try event.preventDefault() (where the first argument to your event callback is event).


my bet it's because of the $(this), try it this way....

$('#bin form').submit(function() {    var $this = $(this);    $.post($this.attr('action'), {        success: function(data) {            $this.hide().siblings('form').show()        },        data: $this.serialize()    });    return false;});

demo no error

demo with the error


Use event.preventDefault() to prevent the default action of the event. One benefit is that you can place this before the Ajax request, so that if it fails, you will still have prevented form submission.

Your code is failing because the value of this in your success callback is the global window object. Your attempt to hide it fails. You probably want this to refer to the form, like this:

$('#bin form').submit(function(ev) {    var _this = this;    ev.preventDefault();    $.post($(this).attr('action'), {        success: function() {                $(_this).hide().siblings('form').show();        },        data: $(this).serialize()    });})

See a working example.