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

Question

i bought course in Udemy to make login system and just wanted to add more input in html to get username ..... but it didn't work it took me like 15 hours and still can't understand why it don't work

<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="[e-mail]">
                </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 code:

$(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 code :

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');
}

what happen that email and password send to database (which i get from source code of the course) and username which i added just don't do anything .. prevent page from redirect i really think i made an idiot mistake but i think 15 hours for trying is enough too .. forgive me for that .. and for my bad English Thanks

Answer 1

edit this in html

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

and edit dataobj in ajax

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

and remove all the id's from html because you have define the same id for every html tag(username, email, paddword), javascript will throw an error if more than one html tag have the same id