AJAX call works in Chrome and Safari but not in Firefox and IE?

Question

This is my code to reset a user\'s password incase the user forgets his password. The data is sent to the PHP code via AJAX requests and the PHP code simply echoes a \"Y\" o

Answer 1

You have to use an event object for the parameter of the event handler, chrome and safari has a global event object called event when an event is triggered but firefox does not. So event.preventDefault(); will cause an error.

E.g.

$('#email_send').click(function(event) {

Answer 2

As already stated, you are not properly implementing the preventDefault() inside of your click handler. However, even if you fix the preventDefault() issue, it's likely still not going to work properly. See: http://jsfiddle.net/ZEFzx/, where the code inside the click handler is not fired at all.

Luckily, you don't need to worry about a click handler since the jQuery Validate plugin already has the submit event handler callback function built in, and this is exactly where you are supposed to put your ajax.

As per the documentation for the Validate plugin, the submitHandler callback function is:

"Callback for handling the actual submit when the form is valid. Gets the form as the only argument. Replaces the default submit. The right place to submit a form via Ajax after it validated."

Try this code instead:

$(document).ready(function () {

    $("#email_form").validate({
        onkeyup: false,
        rules: {
            email: {
                required: true,
                email: true
            }
        },
        messages: {
            email: {
                required: "Please enter your email ID.",
                email: "Please enter a valid email ID."
            }
        },
        submitHandler: function (form) {
            var email = $('#email').val();
            // var data = $(form).serialize();  // capture all the form data at once
            $.ajax({
                type: "POST",
                url: "reset_code.php",
                data: {
                    email: email
                },
                cache: false,
                success: function (response) {
                    if (response == "Y") {
                        $('#code_form').show();
                        $('#email_send').hide();
                        $('#status').html("Check your mail for the reset code.");
                    } else {
                        $('#status').html("Looks like you have entered a wrong email ID.");
                    }
                }
            });
            return false; // blocks redirect after submission via ajax
        }
    });

});

DEMO: http://jsfiddle.net/xMg8e/