0

I have a website with a footer in which there's a small form. There's only two things in this form: an input textbox for taking emails, and a submit button.

When user presses the Submit button, no redirection takes place, and instead an AJAX call is done to add the email to a Database table, and show the appropriate message using jQuery slideDown().

The problem is that even though no redirection to another page actually happens, still when I refresh the page sometimes, I get a browser alert that this may resubmit data. I doesn't always come, only sometimes. Don't know why.

How can I completely stop this error from coming ?

JSFiddle (See note below): http://jsfiddle.net/ahmadka/7cZZY/1/

Please note that because the footer_subscribe.php file is unaccessible from within JSFiddle, I don't get the form resubmission error here .. However the error does sometimes show up when you refresh the original actual page:

Actual page (Form is in footer section at the bottom of page): http://bit.ly/15eb2Cx

HTML Code:

<section class="subscribe">
    <form class="form-wrapper cf" method="post">
        <input name="email" placeholder="Enter your email here..." />
        <button id="submitBtn" type="submit">Subscribe</button>
    </form>
    <p></p>
</section>

JavaScript Code:

$(function () {
    $("#submitBtn").click(function (event) {
        event.preventDefault();
        event.returnValue = false;
        var inputEmail = $(".subscribe input[name=email]").val();
        var inputEmailTrimmed = $.trim(inputEmail);
        if (inputEmail == "") {
            $(".subscribe p").html("Please enter an email address.").slideDown();
        } else if (inputEmailTrimmed == "" && inputEmail != inputEmailTrimmed) {
            $(".subscribe p").html("Simply entering spaces won't cut it :)").slideDown();
        } else {
            $.ajax({
                type: "POST",
                url: "footer_subscribe.php",
                data: {
                    email: inputEmail
                },
                success: function (data) {
                    if (data == "successful") {
                        $(".subscribe p").html("Thanks for your interest!").slideDown();
                    } else if (data == "already_subscribed") {
                        $(".subscribe p").html("This email is already subscribed.").slideDown();
                    } else if (data == "invalid_email") {
                        $(".subscribe p").html("This email is invalid.").slideDown();
                    } else {
                        $(".subscribe p").html("Something went wrong. Please try again later.").slideDown();
                    }
                },
                error: function () {
                    $(".subscribe p").html("Subscription is not available.").slideDown();
                }
            });
        }

    });
});
Ahmad
  • 12,886
  • 30
  • 93
  • 146

0 Answers0