Why does this registration form ajax mysql insert work in chrome and safari but not firefox?

Question

I am setting up a user registration page. It works in Chrome and Safari, but not Firefox (latest Mac versions). I am working locally on MAMP.

Expected Output:

• Ajax request is sent after submit button click.
• If username is available, user, password, email are inserted into mysql table. Success: hidden div "You are registered" appears.
• Else, hidden div "Username unavailable appears"

Real Output:

• Output is as expected in Chrome and Safari.

• In Firefox, nothing is inserted in the table. No hidden divs show up, instead, the entire webpage reloads.

Why is the code below producing these different results?

Javascript

$(function() {
    $("#registersubmit").click(function() {
        var dataString = $("#registerclick").serialize();

        if (registerclick.user.value == "")
        {
            $('.error').show();
            registerclick.user.focus();
            return (false);
        }
        else
        {
            $.ajax({
                type: "POST",
                url: "register.php",
                data: dataString,
                success: function(reg) {
                    if (!reg)
                    {
                        $('.userexists').hide();
                        $('.error').hide();
                        $('.success').fadeOut(200).show();
                    }
                    else
                    {
                        $('.userexists').show();
                    }
                }
            });
        }
        return false;
    });
});

PHP for MYSQL Insert

$user = ($_POST['user']);
$email = ($_POST['email']);
$time = time();
$password = ($_POST['password']);

if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
    include("config.php");

    $sql = "INSERT INTO users (username, password, email,timestamp) VALUES ('".mysql_real_escape_string($user)."','".mysql_real_escape_string($password)."', '".mysql_real_escape_string($email)."', '$time')";

    $result = mysql_query($sql);
    if (!$result)
    {
        die(mysql_error());
    }
}

Assume that password encryption and mysql escape precautions have been made.

Answer 1

The problem was with

if (registerclick.user.value == "")

Firefox apparently can't handle this for reasons I don't know. So I replaced it with

if (document.registerclick.user.value.length == "")

and it now works!

Answer 2

Since problems lies in client part only, you need to inspect client code. Install firebug for firefox and debug what is broken in FF.

I may give you one idea just from the top of my head, though. In latest Firefoxes (from 7 ^th or 8 ^th version) elements with some id are not automatically exposed into global variables with the same name.

I bet, you didn't declared registerclick variable by yourself.

Therefore you need either to declare this variable:

var registerclick = $('#registerclick').get(0);

or replace registerclick in your code with forms.registerclick or somewhat... anyway, I hope, you get the idea.

PS: He-he, read comments. Anyway, I'll leave my answer.