Question

我的表单需要授权＆＃39; - 用户需要输入存储在数据库中的一个授权码才能提交表格（基本上是密码）。我尝试使用带有PHP的AJAX来显示（使用Bootstrap的反馈字形），勾选或交叉，具体取决于用户是否输入了有效值并允许或阻止表单提交。如果用户未输入有效值，则会阻止表单提交。

我目前的代码目前无法正常运行，我们将非常感谢您的帮助。

HTML：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.5/validator.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.5/validator.min.js"></script>

<form name="auth_form" id="auth_form" method="post" action="action.php">
    <p>Please enter authorisation code.</p>

    <div class="form-group has-feedback" name="auth_code" id="auth_code">

        <input class="form-control" id="auth_code_input" autocomplete="new-password" name="auth_code_input" type="password" required>
        <span class="form-control-feedback glyphicon" id="statusIcon"></span>

    </div>
    <button class="btn btn-success btn-ok" name="Submit" id="submit" type="Submit">Submit</button>
</form>

JS：

<script>

    $(document).ready(function() {

        // Validate on blur and display 'cross' icon in span if invalid, tick if valid
        $('#auth_code_input').blur(function() {
            if (!ValidateInput()) {
                e.preventDefault();
            }
        });

        // Validate on submit and prevent form submission if invalid
        $('#auth_form').on('submit', function(e) {
            if (!ValidateInput()) {
                e.preventDefault();
            }
        })
    });


    // AJAX to check the auth-code server-side

    function ValidateInput() {

                var given_code = document.getElementById('auth_code_input').value;

                $.ajax({
                        url: 'checkauth.php',
                        type: 'POST',
                        data: given_code
                    });

                .done(function(response) {

                            var response = valid;

                            if valid = '1' {

                                $('#statusIcon').removeClass('glyphicon-remove').addClass('glyphicon-ok');
                                IsValid = true;

                            } else {

                                $('#statusIcon').removeClass('glyphicon-ok').addClass('glyphicon-remove');
                                IsValid = false;
                            }

                        }

                .fail(function() {
                            IsValid = false;
                            $('#auth_code_input').val('Something went wrong, please try again.');
                });

            return IsValid;

        });

</script>

checkauth.php

<?php

error_reporting(E_ALL);
ini_set( 'display_errors', 1);

$given_code = $_REQUEST['given_code'];

include 'pdo_config.php';

$valid = '0';

try {

    $conn = new PDO($dsn, $user, $pass, $opt);

    $stmt = $conn->prepare("SELECT instructor_id, auth_code FROM tbl_instructors WHERE auth_code = :given_code;");
    $stmt->bindParam(':given_code', $given_code);
    $stmt->execute();

    $row = $stmt->fetchColumn();

    if ($row == 1) { // row equals one, means auth-code corresponds to an instructor and is valid

        $valid = '1';

    } else {

        $valid = '0';

    }

    echo valid;

}
catch (PDOException $e) {
    echo "Error: " . $e->getMessage();
}

Answer 1

在你的js中发现了一些错误，函数ValidateInput（）{，plz从下面更新你的代码。

function ValidateInput() {

                var given_code = document.getElementById('auth_code_input').value;

                $.ajax({
                        url: 'checkauth.php',
                        type: 'POST',
                        data: given_code
                    });

                .done(function(response) {



                            if (response == '1') {
                                $('#statusIcon').removeClass('glyphicon-remove').addClass('glyphicon-ok');
                                IsValid = true;

                            } else {
                                $('#statusIcon').removeClass('glyphicon-ok').addClass('glyphicon-remove');
                                IsValid = false;
                            }

                        }

                .fail(function() {
                            IsValid = false;
                            $('#auth_code_input').val('Something went wrong, please try again.');
                });

            return IsValid;

        });

如果它仍然不起作用，则plz在你的ajax调用中添加async：true，

 $.ajax({
        url: 'checkauth.php',
        type: 'POST',
        data: given_code,
        async: true                

    });

它肯定会起作用

使用AJAX授权具有数据库值的表单

1 个答案: