【问题标题】:JQuery Form only submits in certain browserJQuery 表单仅在某些浏览器中提交
【发布时间】:2015-10-02 14:09:47
【问题描述】:

我正在为我的网站制作一个注册表单,它只能在 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;

【问题讨论】:

  • 尝试将event.preventDefault() 放在回调的顶部。浏览器可能在 PHP 脚本到达函数末尾之前就已命中。
  • 简单错误:event 未定义。
  • @searsaw 我试过了,但结果是一样的:(
  • @epascarello 我如何定义这个事件?
  • .submit(function(event) {

标签: javascript php jquery html forms


【解决方案1】:

将事件传递到回调中

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

【讨论】:

  • 我试过了,但现在表单在任何一个浏览器中都不起作用。
  • 没有错误,我收到响应代码 200 和响应 '0'
  • 你的 printf 还在你的 php 中吗?也许 $num 是零
  • 我把它注释掉了,$num 应该包含零值才能使注册工作;任何其他值表示给定电子邮件的帐户已存在。但是,我没有什么应该返回 0。
  • 听起来你的 javascript 工作正常。跟踪您的 php 脚本并确保您的所有 $_POST 参数和变量都已正确设置
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-01-20
  • 1970-01-01
  • 2015-05-04
  • 2018-12-11
  • 1970-01-01
  • 2013-08-02
相关资源
最近更新 更多