Having trouble with a basic HTML and JavaScript login page, unable to retrieve the email and password fields when the button is clicked

<!doctype html>

</html>

<head>
    <title> </title>
    <link href="../assets/css/bootstrap.css" rel="stylesheet">
    <link href="sigin-style.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

</head>

<body>
    <div class="container-fluid px-1 px-md-5 px-lg-1 px-xl-5 py-5 mx-auto">
        <div class="card card0 border-0">
            <div class="row d-flex">
                <div class="col-lg-6">
                    <div class="card1 pb-5">
                        <div class="row"> </div>
                        <div class="row px-3 justify-content-center mt-4 mb-5 border-line"> <img
                                src="https://i.imgur.com/uNGdWHi.png" class="image"> </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="card2 card border-0 px-4 py-5" name = "login">
                        <div class="row mb-4 px-3"> <!-- fb twitter linked login-->
                            <h6 class="mb-0 mr-4 mt-2">Sign in with</h6>
                            <div class="facebook text-center mr-3">
                                <div class="fa fa-facebook"></div>
                            </div>
                            <div class="twitter text-center mr-3">
                                <div class="fa fa-twitter"></div>
                            </div>
                            <div class="linkedin text-center mr-3">
                                <div class="fa fa-linkedin"></div>
                            </div>
                        </div>
                        <div class="row px-3 mb-4"> <!-- OR login separator line-->
                            <div class="line"></div> <small class="or text-center">Or</small>
                            <div class="line"></div>
                        </div>

                        <div class="row px-3" > <!-- email address-->
                            <label class="mb-1">
                                <h6 class="mb-0 text-sm">Email Address</h6>
                            </label> 
                            <input class="mb-4" type="text" name="email" placeholder="Enter a valid email address">
                        </div>
                        <div class="row px-3"> <label class="mb-1"> <!-- passowrd-->
                                <h6 class="mb-0 text-sm">Password</h6>
                            </label> 
                            <input type="password" name="password" placeholder="Enter password"> 
                        </div>
                        <div class="row px-3 mb-4"> <!-- remember me checkbox and forgot password link-->
                            <div class="custom-control custom-checkbox custom-control-inline"> <!--remember me-->
                                <input id="chk1"
                                    type="checkbox" name="chk" class="custom-control-input"> 
                                    <label for="chk1" class="custom-control-label text-sm">Remember me</label>
                            </div>
                            <a href="#" class="ml-auto mb-0 text-sm">Forgot Password?</a> <!--fogot password-->
                        </div>
                        <div class="row mb-3 px-3"> <!--login button-->
                            <button type="submit" class="btn btn-blue text-center" onclick="validate()" >Login</button>
                        </div>
                        <div class="row mb-4 px-3"><!-- register link-->
                            <small class="font-weight-bold">Don't have an account?
                                <a href="E:/WebDevStudy/html-css/bootstrap%20webpage%20example/register.html" 
                                class="text-danger "> Register
                                </a>
                            </small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bg-blue py-4">
                <div class="row px-3"> <small class="ml-4 ml-sm-5 mb-2">Copyright &copy; 2019. All rights
                        reserved.</small>
                    <div class="social-contact ml-4 ml-sm-auto"> <span class="fa fa-facebook mr-4 text-sm"></span> <span
                            class="fa fa-google-plus mr-4 text-sm"></span> <span
                            class="fa fa-linkedin mr-4 text-sm"></span> <span
                            class="fa fa-twitter mr-4 mr-sm-5 text-sm"></span> </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>

    function validate()
    {
        var em = document.login.email.value;
        var pw = document.login.password.value;
        console.log(em);
       
        var valid = false;
        var usernameArray = ["ashish", "rahul"];
        var passwordArray = ["12345", "54321"];
        for (var i = 0; i < usernameArray.length; i++)
        {

            if ((un == usernameArray[i]) && (pw == passwordArray[i]))
            {
                valid = true;
                break;
            }
        }
        if (valid)
        {
            alert("Login was successful");
            window.location = "www.google.ie";
            return false;
        }
        else
        {
            alert("Incorrect password or username you are now blocked");
            return false;
        }
        
    }
</script>

</html>

This HTML code snippet is designed to create a straightforward login page where users can enter their email and password to log in by clicking the login button. The validation script at the end of the document attempts to match the input values with predefined arrays but there seems to be an issue preventing it from working correctly. Your assistance in identifying the problem would be greatly appreciated.

javascripthtmlcssauthenticationbootstrap-4

Answer №1

Could you give this a try? I've tested it and it seems to be working.

I made the following changes:

var em = document.login.email.value;
var pw = document.login.password.value;

was changed to:

 var em = document.getElementById('email').value;
 var pw = document.getElementById('password').value;

And I assigned IDs to your email and password inputs.

function validate() {
  var em = document.getElementById('email').value;
  var pw = document.getElementById('password').value;
  console.log(em);

  var valid = false;
  var usernameArray = ["ashish", "rahul"];
  var passwordArray = ["12345", "54321"];
  for (var i = 0; i < usernameArray.length; i++) {

    if ((em == usernameArray[i]) && (pw == passwordArray[i])) {
      valid = true;
      break;
    }
  }
  if (valid) {
    alert("Login was successful");
    window.location = "www.google.ie";
    return false;
  } else {
    alert("Incorrect password or username you are now blocked");
    return false;
  }

}
......

Answer №2

Ensure your code includes form tags; both the submit button and input fields need to be placed within these tags for proper functionality.

Answer №3

Make sure to enclose your form inputs within a form tag to access the values as desired.

Consider this layout:

<!doctype html>

<html>

<head>
    <title> </title>
    <link href="../assets/css/bootstrap.css" rel="stylesheet">
    <link href="sigin-style.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

</head>

<body>
    <div class="container-fluid px-1 px-md-5 px-lg-1 px-xl-5 py-5 mx-auto">
        <div class="card card0 border-0">
            <div class="row d-flex">
                <div class="col-lg-6">
                    <div class="card1 pb-5">
                        <div class="row"> </div>
                        <div class="row px-3 justify-content-center mt-4 mb-5 border-line"> <img
                                src="https://i.imgur.com/uNGdWHi.png" class="image"> </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="card2 card border-0 px-4 py-5" name = "login">
                        <div class="row mb-4 px-3"> <!-- fb twitter linked login-->
                            <h6 class="mb-0 mr-4 mt-2">Sign in with</h6>
                            <div class="facebook text-center mr-3">
                                <div class="fa fa-facebook"></div>
                            </div>
                            <div class="twitter text-center mr-3">
                                <div class="fa fa-twitter"></div>
                            </div>
                            <div class="linkedin text-center mr-3">
                                <div class="fa fa-linkedin"></div>
                            </div>
                        </div>
                        <div class="row px-3 mb-4"> <!-- OR login separator line-->
                            <div class="line"></div> <small class="or text-center">Or</small>
                            <div class="line"></div>
                        </div>
                        <form name="login">
                            <div class="row px-3" > <!-- email address-->
                                <label class="mb-1">
                                    <h6 class="mb-0 text-sm">Email Address</h6>
                                </label> 
                                <input class="mb-4" type="text" name="email" placeholder="Enter a valid email address">
                            </div>
                            <div class="row px-3"> <label class="mb-1"> <!-- passowrd-->
                                    <h6 class="mb-0 text-sm">Password</h6>
                                </label> 
                                <input type="password" name="password" placeholder="Enter password"> 
                            </div>
                            <div class="row px-3 mb-4"> <!-- remember me checkbox and forgot password link-->
                                <div class="custom-control custom-checkbox custom-control-inline"> <!--remember me-->
                                    <input id="chk1"
                                        type="checkbox" name="chk" class="custom-control-input"> 
                                        <label for="chk1" class="custom-control-label text-sm">Remember me</label>
                                </div>
                                <a href="#" class="ml-auto mb-0 text-sm">Forgot Password?</a> <!--fogot password-->
                            </div>
                            <div class="row mb-3 px-3"> <!--login button-->
                                <button type="submit" class="btn btn-blue text-center" onclick="validate()" >Login</button>
                            </div>
                        </form>
                        <div class="row mb-4 px-3"><!-- register link-->
                            <small class="font-weight-bold">Don't have an account?
                                <a href="E:/WebDevStudy/html-css/bootstrap%20webpage%20example/register.html" 
                                class="text-danger "> Register
                                </a>
                            </small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bg-blue py-4">
                <div class="row px-3"> <small class="ml-4 ml-sm-5 mb-2">Copyright &copy; 2019. All rights
                        reserved.</small>
                    <div class="social-contact ml-4 ml-sm-auto"> <span class="fa fa-facebook mr-4 text-sm"></span> <span
                            class="fa fa-google-plus mr-4 text-sm"></span> <span
                            class="fa fa-linkedin mr-4 text-sm"></span> <span
                            class="fa fa-twitter mr-4 mr-sm-5 text-sm"></span> </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>

    function validate()
    {
        var em = document.login.email.value;
        var pw = document.login.password.value;
        console.log(em);
       
        var valid = false;
        var usernameArray = ["ashish", "rahul"];
        var passwordArray = ["12345", "54321"];
        for (var i = 0; i < usernameArray.length; i++)
        {

            if ((un == usernameArray[i]) && (pw == passwordArray[i]))
            {
                valid = true;
                break;
            }
        }
        if (valid)
        {
            alert("Login was successful");
            window.location = "www.google.ie";
            return false;
        }
        else
        {
            alert("Incorrect password or username you are now blocked");
            return false;
        }
        
    }
</script>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Hover over elements in jQuery to smoothly transition them from one class to another

Is it possible to achieve this? For example: .class1{ background-image:(whatever.jpg) color: #fff; } .class2{ background-image:(whatever2.jpg) color: #999; } Can I create a fade effect for all elements with class1 to class2 when the mouse hover ...

jquerycsseffectsfadeinjquery-effects

Uploading several files with Laravel and Vue JS in one go

Recently, I have been working on a project where I need to upload multiple image files using Vue JS in conjunction with Laravel on the server side. This is the snippet from my Vue template: <input type="file" id = "file" ref="f ...

javascriptlaravelvue.jsfile-upload

Is there a way to apply my CSS file to modify a specific portion of my HTML document?

I am in the process of creating my first website. I have created a file named style.css where I have included the following code: img { width: 100%; height: 100%; } The issue I am facing is that this code is impacting the size of every image on the ...

htmlcss

Retrieve information from a JSON object based on the specified value

Here is the JSON data I am working with: { "sales": [{ "manager": "alberic", "surgeon": "Dr Barry Biggins", "amount": "300", "country": "USA", "percent-seller": "30", "antiquity": "June 2017", "d ...

javascriptjqueryjsonobject

Can we create a custom event in JavaScript that triggers every time a message is logged to the console using console.log?

This specific functionality will execute a task whenever text is printed to the node.js console. Here's what I envision it could resemble: on('console', message => {console.log("text was printed! " + message)}) Standard node.j ...

javascriptnode.js

Integrating autoprefix-cli into ANT build

I've been attempting to integrate autoprefix-cli into my ANT build. The code snippet below shows what I've tried so far. <target name="auto"> <apply executable="autoprefixer-cli.bat" verbose="true" force="true" failonerror="true"> ...

javacssbuildantautoprefixer

CSS Grid having trouble with wrapping elements

Greetings to all, As a newcomer to the world of web development, I am currently exploring the wonders of the CSS grid tool. However, I have encountered a roadblock: My intention is for the cards to automatically flow one by one into the next row while ma ...

htmlcsslayoutcss-grid

What code can I use to prompt clients to refresh JavaScript files automatically?

We are experiencing an issue where, even after pushing out updates with new JavaScript files, client browsers continue to use the cached version of the file and do not display the latest changes. While we can advise users to perform a ctrlF5 refresh during ...

javascriptreactjs

Why isn't setInterval set to a duration of one thousand milliseconds?

While trying to use some code from w3schools, I noticed that the setInterval in the example is set to 5 instead of 5000. Shouldn't it be in milliseconds? If not, how can I speed up this animation? When I try reducing it to decimals like 0.01, the anim ...

javascripthtml

Guide to Generating Downloadable Links for JPG Images Stored in MongoDB Using Node.js

I have successfully uploaded an image to MongoDB as a Buffer. Now, I need to figure out how to display this image in my React Native app using a URL, for example: http://localhost:8080/fullImg.jpeg How can I achieve this? Below is the MongoDB Schema I am ...

javascriptnode.jsmongodb

Creating a jQuery-powered assistance pop-up: A step-by-step guide

On various websites, you may have seen a help box labeled with a question mark icon [?], which, when hovered over, displays a small box of additional information. I discovered that these are typically created using a combination of Javascript and jQuery. ...

javascriptjquery

Utilizing Regular Expressions for extracting data from an HTML webpage

Is it possible to extract the response "Here is the solution" from an HTML document using Regular Expression? <b>Previous Query:</b> <b>Here is the answer</b> ...

pythonhtmlregex

Issue with implementation of Foundation's 6-column grid system

Attempting to initiate a basic project using foundation 6. Here is the simple HTML utilized: <!doctype html> <html class="no-js" lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible"&g ...

htmlzurb-foundation

Protractor successfully opens Firefox, however no URL is loaded. Chrome, on the other hand, functions perfectly

Every time I attempt to execute my protractor tests on Firefox, the browser opens but no URL is loaded. Eventually, an error message appears in the command prompt: Using FirefoxDriver directly... [launcher] Running 1 instances of WebDriver ERROR - Unabl ...

javascriptangularjsfirefoxseleniumprotractor

Guide to aligning a component in the middle of the screen - Angular

As I delve into my project using Angular, I find myself unsure about the best approach to rendering a component within the main component. Check out the repository: https://github.com/jrsbaum/crud-angular See the demo here: Login credentials: Email: [e ...

javascriptangulartypescriptng-templateangular2-ngcontent

Caution: It is important that each child within a list is assigned a distinct "key" prop - specifically in the Tbody component

I encountered the error above while running jest tests on a component. npm start is running without any issues. The component code is as follows: .... .... const [Data, setData] = useState([]); useEffect(() => { const fetchData = async () =&g ...

javascriptnode.jsreactjsjestjs

Error occurred while trying to authenticate the user "root" with the password in Linux using NodeJS, Express, and PostgreSQL

Update - Hurrah! It appears I neglected to consult the manual. Following the guidelines exactly for the environmental variables seems to be necessary. Corrected code: # PostgreSQL Database Information PGDATABASE_TEST = user_db PGDATABASE = user_db PGUSER ...

javascriptpostgresqlexpressenvironment-variables

What is the method for determining the location of the VR headset in a three.js environment?

Can anyone help me understand how to obtain the VR headset's position using three.js? I have successfully created a scene and am receiving live controller positions, but I am unsure on how to access the headset's position to track the user's ...

javascriptthree.js

Prioritizing reusability and scalability in the design of Vue.js application architecture

I am currently working on adapting an Application that was originally developed for a single country to be used in multiple countries (20+) with only slight modifications needed for each location. I am exploring ways to make the code reusable and scalable ...

javascriptvue.jsarchitectureapplication-design

Transmit information from the backend Node.js to the frontend (without using sockets)

Is there a method to transfer data from my socket, for example example.com:8000, to my web server that is not on the same socket at example.com/index.php? I've searched through various codes but have not come across any solutions yet. If you could pro ...

javascriptnode.jsnpmsocket.io