无法通过js获取输入类型文本

Question

我在 Udemy 购买了课程来制作登录系统，只是想在 html 中添加更多输入以获取用户名.....但它没有用 我花了大约 15 个小时，仍然不明白为什么它不起作用

<div class="uk-section uk-container">
    <div class="uk-grid uk-child-width-1-3@s uk-child-width-1-1" uk-grid>
        <form class="uk-form-stacked js-register">

            <h2>Register</h2>


            <div class="uk-margin">
                <label class="uk-form-label" for="form-stacked-text">Username</label>
                <div class="uk-form-controls">
                    <input class="uk-input" id="form-stacked-text" type="text" required='required' placeholder="Username">
                </div>
            </div>






            <div class="uk-margin">
                <label class="uk-form-label" for="form-stacked-text">Email</label>
                <div class="uk-form-controls">
                    <input class="uk-input" id="form-stacked-text" type="email" required='required' placeholder="email@email.com">
                </div>
            </div>

            <div class="uk-margin">
                <label class="uk-form-label" for="form-stacked-text">Passphrase</label>
                <div class="uk-form-controls">
                    <input class="uk-input" id="form-stacked-text" type="password" required='required' placeholder="Your passphrase">
                </div>
            </div>

            <div class="uk-margin uk-alert uk-alert-danger js-error" style='display: none;'></div>

            <div class="uk-margin">
                <button class="uk-button uk-button-default" type="submit">Register</button>
            </div>

        </form>
    </div>

jquery 代码：

$(document).on("submit", "form.js-register", function(event) {
event.preventDefault();

var _form = $(this);
var _error = $(".js-error", _form);

var dataObj = {
    username: $("input[type='text']", _form).val(),
    email: $("input[type='email']", _form).val(),
    password: $("input[type='password']", _form).val()
};

if(dataObj.email.length < 6) {
    _error
        .text("Please enter a valid email address")
        .show();
    return false;
} else if (dataObj.password.length < 11) {
    _error
        .text("Please enter a passphrase that is at least 11 characters long.")
        .show();
    return false;
}

// Assuming the code gets this far, we can start the ajax process
_error.hide();

$.ajax({
    type: 'POST',
    url: '/ajax/register.php',
    data: dataObj,
    dataType: 'json',
    async: true,
})
.done(function ajaxDone(data) {
    // Whatever data is 
    if(data.redirect !== undefined) {
        window.location = data.redirect;
    } else if(data.error !== undefined) {
        _error
            .text(data.error)
            .show();
    }
})
.fail(function ajaxFailed(e) {
    // This failed 
})
.always(function ajaxAlwaysDoThis(data) {
    // Always do
    console.log('Always');
})

return false;
})

php 代码：

define('__CONFIG__', true);

// Require the config
require_once "../inc/config.php"; 

if($_SERVER['REQUEST_METHOD'] == 'POST' or 1==1) {
    // Always return JSON format
    // header('Content-Type: application/json');

    $return = [];

    $email = Filter::String( $_POST['email'] );

    // Make sure the user does not exist. 
    $findUser = $con->prepare("SELECT user_id FROM users WHERE email = LOWER(:email) LIMIT 1");
    $findUser->bindParam(':email', $email, PDO::PARAM_STR);
    $findUser->execute();

    if($findUser->rowCount() == 1) {
        // User exists 
        // We can also check to see if they are able to log in. 
        $return['error'] = "You already have an account";
        $return['is_logged_in'] = false;
    } else {
        // User does not exist, add them now. 

        $password = password_hash($_POST['password'], PASSWORD_DEFAULT);
        $username = $_POST['text'] ;
        $addUser = $con->prepare("INSERT INTO users(username,email, password) VALUES(:username,LOWER(:email), :password)");
        $addUser->bindParam(':username', $username, PDO::PARAM_STR);
        $addUser->bindParam(':email', $email, PDO::PARAM_STR);
        $addUser->bindParam(':password', $password, PDO::PARAM_STR);
        $addUser->execute();

        $user_id = $con->lastInsertId();

        $_SESSION['user_id'] = (int) $user_id;

        $return['redirect'] = '/dashboard.php?message=welcome';
        $return['is_logged_in'] = true;
    }

    echo json_encode($return, JSON_PRETTY_PRINT); exit;
} else {
    // Die. Kill the script. Redirect the user. Do something regardless.
    exit('Invalid URL');
}

电子邮件和密码发送到数据库会发生什么（我从课程的源代码中获得） 和我添加的用户名什么都不做..防止页面重定向 我真的认为我犯了一个白痴的错误，但我认为 15 小时的尝试也足够了.. 原谅我 .. 以及我糟糕的英语 谢谢

Answer 1

在 html 中编辑它

<div class="uk-form-controls">
    <input class="uk-input" name="username" type="text" required='required' placeholder="Username">
</div>

并在 ajax 中编辑 dataobj

var dataObj = {
    username: $("input[name='username']", _form).val(),
    email: $("input[type='email']", _form).val(),
    password: $("input[type='password']", _form).val()
};

并从html中删除所有id，因为您为每个html标签（用户名，电子邮件，密码）定义了相同的id，如果多个html标签具有相同的id，javascript将抛出错误