Errors with event.preventdefault

Question

This doesn't work

JS:

    var currentPath = window.location.pathname;
    var currentPage = currentPath.substring(currentPath.lastIndexOf('/') + 1);

        $(function() { 

            $("#shoutBox").submit(function(event) {
                event.preventDefault();

                var values = $('#shoutBox').serialize();

                $.post("shoutbox.php", values)

                .done(function(data) {
                    $('input:text[name=shout]').val("JE SHOUT IS GEPOST! WACHT 1 MINUUT!");
                    $('input:text[name=shout]').attr('readonly', true);
                    setTimeout(
                        function() 
                        {
                            $('input:text[name=shout]').val("JE KAN EEN NIEUWE SHOUT MAKEN!");
                            $('input:text[name=shout]').attr('readonly', false);
                        }, 60000);
                });
            });
        });

        $(function() {
            $("#newName").submit(function(event) {
                event.preventDefault();

                var valuen = $('#newName').serialize();

                $.post("shoutbox.php", valuen)

                .done(function(data) {
                    reload();
                });
            });
        });

    function to_new_page(link)
    {
        $("#content").fadeOut(function()
            {
                $(this).load(link+" #content", function()
                {
                    $(this).fadeIn();
                })
            });
        history.pushState({change: "page"}, "RandomRadio", "/"+link);
    }

    function reload()
    {
        to_new_page(currentPage);
    }

Form #shoutBox works sucessfully.
But when I submit the form #newName twice, it will refresh the page.

Yes, probably because after you submitted the first time the AJAX request for the first time completed and you call reload() yourself. What did you expect? — 11684
It will show the #shoutBox form, but when you submit that, it will even just reload. Reload will fade out the page and will fade in a reloaded page.But #newName calls $.post("shoutbox.php") twice, one getted and one posted, and I don't know why he is making a getted request. — user1934575
Oh wait, I probably misunderstood you. So you are saying that the #shoutBox form works as it should but if you submitted #newName twice it stops working? — 11684
it seems like to_new_page method reloads something. I bet you gen new #newName form and sumbit event is not binded. Use a delegation. — Eru

Jani Hyytiäinen Jani Hyytiäinen · Accepted Answer · 2013-01-29T20:15:51

Perhaps because your .done calls reload()?

Nevertheless, I would add return false;

$("#newName").submit(function(event) {
            event.preventDefault();

            var valuen = $('#newName').serialize();

            $.post("shoutbox.php", valuen)

            .done(function(data) {
                reload();
            });
            return false;
        });

And please, fix your quotation. Either choose single or double quotes and stick to that.

Errors with event.preventdefault

2 Answers