Input field value 'undefined' even with value in it

Question

I am trying to make a login form. for some reason i am getting an error my input is 'null' or undefined even when I fill out the form and submit

<form name ="loginform"  onSubmit ={validate()} method ="post">
      <p>Email</p>
    <input id = "mail"   type = "email"  name = "usr" placeholder = "Enter Email" required></input>
    <p>Password</p>
    <input id ="pass" type ="password"  name ="pword"  placeholder = "Enter Password" required></input>


     <input type = "submit"   name ="" value ="Login"  ></input> <br /> 
    <a id ="demo" href ="#" style={{color:'white'}} >Forget Password?</a><br />
    <a href = "#" style ={{color:'white'}}>need help?</a>
</form>




  function validate(){

  var un =document.getElementById("mail").value;
  var pw = document.getElementById("pass").value;

  var usernames = "username"; 
  var passwords = "password" ;
  if ((usernames ===  un) && (passwords === pw)) {
      window.location = " index.js ";
      return false;
  }
  else {
      alert ("Login was unsuccessful, please check your username and password");
  }
  }

-Here is the function and I get this error: TypeError: Unable to get property 'value' of undefined or null reference. any help is apprectaed

Answer 1

Try the following changes:

in your var username use var usernames= "email@test.com"; as your input is an email.
While adding CSS style on each line is considered bad practice, you can do it with this syntax: style = "color:white" and add, change whatever attributes you want to change. NOTE: White text color on white page will hide it for you.
Various html errors, I suggest use test your HTML code here every time: https://validator.w3.org/

Here is the final document I have for you:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
    <!-- <link rel="stylesheet" type="text/css" media="screen" href="main.css"> -->
    <script>
        function validate() {
            var un = document.getElementById("mail").value;
            var pw = document.getElementById("pass").value;
            var usernames = "email@test.com";
            var passwords = "password";
            if ((usernames === un) && (passwords === pw)) {
                //window.location = " index.js ";
                //return false;
                alert("Login was Succesful"); // GOES HERE IF LOGIN WAS SUCCESSFUL
            }
            else {
                alert("Login was unsuccessful, please check your username and 
                      password");
            }
        } 
    </script>
</head>
<body>
    <form name="loginform" onSubmit={validate()} method="post">
        <p>Email</p>
        <input id="mail" type="email" name="usr" placeholder="Enter Email" required>
        <p>Password</p>
        <input id="pass" type="password" name="pword" placeholder="Enter Password" 
          required>
        <input type="submit" name="Login" value="Login"><br />
        <a id="demo" href="#" style="color: white">Forget Password?</a><br />
        <a href="#" style="color: white">need help?</a>
    </form>
</body>
</html>

Input field value 'undefined' even with value in it

Question

1 answers

solution1
0 2019-03-29 18:23:32

Input field value 'undefined' even with value in it

Question

1 answers

solution1 0 2019-03-29 18:23:32

solution1
0 2019-03-29 18:23:32