jQuery Submit Refreshing Page

Question

The following code is intended to do a purely ajax POST request, instead it seems to do the POST via ajax and then the browser navigates to the response.

The HTML...

<div id="bin">
    <form class="add" method="post" action="/bin/add/">
        <p>I'm interested! Save for later.</p>
        <input type="hidden" name="product_id" value="23423">
        <input type="submit" value="Save">
    </form> 
    <form style="display:none;" class="remove" method="post" action="/bin/remove/">
        <p>I changed my mind--I'm not interested.</p>
        <input type="hidden" name="product_id" value="23423">
        <input type="submit" value="Unsave">
    </form>
</div>

The jQuery...

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

                });
                return false;
            })

As far as I understand it, the return false; line should mean that no matter what, any calls to the submit function or clicks on the 'Submit' button or the hitting of enter means that my function will execute and the browser will not navigate to /bin/add or /bin/remove. But for some reason, the browser is changing pages.

Any idea what I'm doing wrong here? Thanks.

Answer 1

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}

Answer 2

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).

Answer 3

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.

Answer 4

Is the $(...).submit(...) inside a $(document).ready(function(){ code here }); ?

should be like:

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