javascript - Cannot read property 'value' of null

I have spent probably an hour attempting to get this figured out... I keep getting this error no matter what I try:

Cannot read property 'value' of null

Here is my HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <div id="login_box"><form class="form-inline" action="JavaScript: login();" method="post">
  <input type="text" class="input-small" id="login_username" name="username" placeholder="Username">
  <input type="password" class="input-small" id="login_password" name="password" placeholder="Password">
  <label class="checkbox"><input type="checkbox" id="login_autologin" name="autologin"> Remember me  </label>
  <button type="submit" class="btn" name="login">Sign in</button>
</form></div>
    <script src=".js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/overall_js.js"></script>
  </body>
</html>

and the related JS file (overall_js.js):

function login() {
$("#login_box").html("logging you in....");
console.log(document.getElementById("login_username").value);
$.post("user.php?mode=login", {
    username : document.getElementById("login_username").value, 
    password : document.getElementById("login_password").value,
    autologin : document.getElementById("login_autologin").value,
}).done(function(data) {
    result = JSON.parse(data);
    if (result.status == 3) {
        $("#login_box").html(
                "Wele back, " + result.user_row.username + "!");
    } else {
        $("#login_box")
                .html("You was not logged in: , " + result.error_msg);
    }
});
}

Thanks if you can figure this out! I am also new to jQuery and JS so if anyone has any suggestions to make it more "Standard", any tips are appreciated!

I have spent probably an hour attempting to get this figured out... I keep getting this error no matter what I try:

Cannot read property 'value' of null

Here is my HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <div id="login_box"><form class="form-inline" action="JavaScript: login();" method="post">
  <input type="text" class="input-small" id="login_username" name="username" placeholder="Username">
  <input type="password" class="input-small" id="login_password" name="password" placeholder="Password">
  <label class="checkbox"><input type="checkbox" id="login_autologin" name="autologin"> Remember me  </label>
  <button type="submit" class="btn" name="login">Sign in</button>
</form></div>
    <script src="http://code.jquery./jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/overall_js.js"></script>
  </body>
</html>

and the related JS file (overall_js.js):

function login() {
$("#login_box").html("logging you in....");
console.log(document.getElementById("login_username").value);
$.post("user.php?mode=login", {
    username : document.getElementById("login_username").value, 
    password : document.getElementById("login_password").value,
    autologin : document.getElementById("login_autologin").value,
}).done(function(data) {
    result = JSON.parse(data);
    if (result.status == 3) {
        $("#login_box").html(
                "Wele back, " + result.user_row.username + "!");
    } else {
        $("#login_box")
                .html("You was not logged in: , " + result.error_msg);
    }
});
}

Thanks if you can figure this out! I am also new to jQuery and JS so if anyone has any suggestions to make it more "Standard", any tips are appreciated!

Share Improve this question edited Jul 19, 2013 at 16:53 asked Jul 19, 2013 at 16:46 alexander7567 66414 silver badges36 bronze badges

3 Notice that you've misspelled passowrd, and that an object literal may not contain the same property name twice. – Bergi Commented Jul 19, 2013 at 16:49
On which line did you got that error? – Bergi Commented Jul 19, 2013 at 16:50
1 Use a javascript debugger (from your browser's development tools), to find out exactly where the error happens. Based on the error message, it seems like one of the three elements are missing, but given your HTML, they're all there. So you'll definitely need the debugger to help you here. – Joe Enos Commented Jul 19, 2013 at 16:51
@Bergi thanks, that would have caused me a problem in the future. I updated that part. I am getting the error on this line: console.log(document.getElementById("login_username").value); – alexander7567 Commented Jul 19, 2013 at 16:54
1 @827: Actually he should have a look at the submit event handler. – Bergi Commented Jul 19, 2013 at 17:04

| Show 1 more ment

2 Answers 2

Sorted by: Reset to default 6

This line

$("#login_box").html("logging you in....");

replaces the content of your <div>. You remove the form and all input elements...

See corrections needed below, lines 6 and 7:

function login() {
    $("#login_box").append("logging you in....");
    var u = $('#login_username').val();
    var p = $('#login_password').val();
    var al = $('#login_autologin').is(':checked');
    console.log(u, p, al);
    $.post("user.php?mode=login", {
        username : u, 
        password : p,
        autologin : al,
    }).done(function(data) {
        result = JSON.parse(data);
        if (result.status == 3) {
            $("#login_box").html(
                    "Wele back, " + result.user_row.username + "!");
        } else {
            $("#login_box")
                    .html("You was not logged in: , " + result.error_msg);
        }
    });
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Cannot read property 'value' of null - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)