Question

我正在为我的网站制作一个注册表单，它只在Firefox中工作（有一些问题），但在Chrome中它根本不起作用。

例如，如果我在Firefox中正确填写表单并提交，PHP页面仍会加载，而不是通过我的ajax调用将该内容发送到我的注册表单。但是在Chrome中，表单似乎根本没有提交。

事实上，在Chrome中，变量data在我的PHP脚本中设置为$num值，然后显示在#modal-body中。

问题：如何在所有浏览器中使用此功能以及为什么我的event.preventdefault()无法正常使用Firefox？

这是我的注册表提交代码：

$('#register-form').submit(function() {
    $('#register-form > .input-group').removeClass('has-error');

    $('#register-form .form-required').each(function() {
        if ($(this).val().trim() == "") {
            empty = true;
            $(this).parent().addClass('has-error');
            errors = "<strong>You have not filled out the login form correctly.</strong>";
        }
        else {
            $(this).parent().removeClass('has-error');
            $(this).parent().addClass('has-success');
        }
    });

    // All fields populated, process the form
    if (!empty) {
        $('.progress').fadeIn(800);
        $('#modal-body').parent().removeClass("has-error");

        var formData = {
            'username'  : $('input[name=usernameReg]').val(),
            'email'     : $('input[name=email]').val(),
            'password'  : $('input[name=passwordReg]').val()
        };

        // Process the form
        $.ajax({
            type        : 'POST',
            url         : 'db.php', 
            data        : formData, 
            dataType    : 'json', 
            encode      : true,
            success     : function(data) {

                if (data) {

                // Fade the resulting message in
                    setTimeout(function() {
                        $(".progress").fadeOut(1000);
                        $("#modal-body").fadeIn(1000);
                        $("#modal-body").html(data);
                    }, 1000);

                    // Fade the resulting message out
                    setTimeout(function() {
                        $("#modal-body").fadeOut(2000);
                    }, 3000);
                }

                else {
                    $('#modal-body').addClass('has-error'); 
                    $('#modal-body').html(data);
                }
            }
        });
    }
    // There were empty fields on the form
    else {
        $('#modal-body').html(errors);
    }
    event.preventDefault(); 
});

这是我的PHP代码，它处理表单的处理并检查以确保该帐户尚不存在，然后在数据库中创建它：

            $hashed = md5($salt.$_POST['passwordReg']);
            $email    = $_POST['email'];

            // Check if account already exists
            $username = strtolower($_POST['usernameReg']);
            $statement = $conn->prepare($selects['username']);
            $statement->bind_param('ss', $hashed, $username);

            if ($statement->execute()) {
                //$statement->bind_result($results);
                $num;
                while($statement->fetch()){
                    $num++;
                }
                $statement->free_result();
            }
            else {
                trigger_error('Error executing MySQL query: ' . $statement->error);
            }

            $statement = null;

            // If num > 0, account exists. 
            // printf($num) only present for debugging purposes
            printf($num);
            if ($num < 1) {
                $statement = $conn->prepare("INSERT INTO `User` (username, email, password) VALUES(?,?,?)");
                $statement->bind_param('sss', $username, $email, $hashed);

                if ($statement->execute()) {
                    echo json_encode('You have registered successfully');
                }
                else {
                    echo json_encode('Sorry, registration failed. Please try again later.');
                }
            }
            else {
                echo json_encode('Sorry, registration failed. Please verify that you do not already have an account.');
            }
        break;

Answer 1

将事件传递给回调

$('#register-form').submit(function(e) {
 // your code...
  e.preventDefault();
}

JQuery Form仅在某些浏览器中提交

1 个答案: