Solving the Problem of Input Values with Jquery and Javascript

I am facing a challenge in making a div vanish with the class 'backarea' while simultaneously displaying another div with the class 'successLog' on the screen. The catch here is that I want this transition to occur only when specific username and password values are entered into two separate input boxes, followed by clicking the login button. The required username is "CodeAcademy" and the password must be "fun-coding". Reviewing my code below, I seem to have made an error somewhere. Would appreciate any insights you can provide after examining my complete code. Thank you. HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Log in box</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <link href='http://fonts.googleapis.com/css?family=Ramabhadra' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Khand:700' rel='stylesheet' type='text/css'>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
    <link href='http://fonts.googleapis.com/css?family=Merriweather:700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Lato:700' rel='stylesheet' type='text/css'>
    <link rel='stylesheet' href='style.css'/>
    <script src='script.js'></script>
</head>
<body>
<div class="successLog">
<div class="header">
    <ul class="cats">
        <li class="listItems" id="home">Home</li>
        <li class="listItems" id="dashboard">Dashboard</li>
        <li class="listItems" id="contactUs">Contact Us</li>
    </ul>
  </div>
  <div class='dropdownHome'>
    <ul class="catLists">
        <li class="catListItem">Event Calender</li><br>
        <li class="catListItem">Bookings</li><br>
        <li class="catListItem">Picture Gallery</li><br>
        <li class="catListItem">Login</li><br>
        <li class="catListItem">Sign Up</li>
    </ul>
  </div>
  <div class="dropdownDashboard">
    <ul class="catLists">
        <li class="catListItem">Saved Info</li><br>
        <li class="catListItem">Friends</li><br>
        <li class="catListItem">Document</li><br>
        <li class="catListItem">Profile</li><br>
        <li class="catListItem">Account</li>
    </ul>
  </div>
  <div class="dropdownContactUs">
    <ul class="catLists">
        <li class="catListItem">Email</li><br>
        <li class="catListItem">Forum</li><br>
        <li class="catListItem">Phone-numbers</li><br>
        <li class="catListItem">Facebook</li><br>
        <li class="catListItem">Twitter</li>
    </ul>
  </div><Br><Br><Br>
    <h1 class="welcomeBack">Hello! Welcome back Code Acedamy</h1>
    <button class="logOut">Log Out</button>
</div>
<div class="backarea">
    <input type="text" placeholder="Username" class="userInput" name="userInput"><h2 class="username">Username:</h2></input>
    <input type="password" class="passInput" placeholder="Password"><h2 class="password">Password:</h2></input>
    <button class="login">Log In</button>
    <p class="createacc">Don't have an account? <a href="http://www.example.com/" class="createone">Creat one.</a></p>
    <p class="error">Sorry but that username or password is incorrect.</p>
</div>
</body>
</html>

CSS:

body {
    background-color:#F0F0F0;
}
.successLog {
    background-color:#8A8A8A;
    height:450px;
    width:700px;
    z-index:1;
    opacity:0;
}
.backarea {
    background-color:#6DE3E3;
    width:255px;
    height:300px;
    border:1px solid black;
    border-radius:9px;
    position:relative;
    top:67px;
    left:230px;
    position:fixed;
}
.userInput {
    padding:5px;
    margin:7px;
    font-family: 'Lato', sans-serif;
    position:relative;
    top:50px;
    left:35px;
    border:1px solid white;
}
.userInput:hover {
    border:2px solid #60BF68;
}
.username {
    color:#E60716;
    font-family: 'Oswald', sans-serif;
    position:relative;
    bottom:50px;
    left:75px;
}
.passInput {
    padding:5px;
    margin:7px;
    font-family: 'Lato', sans-serif;
    position:relative;
    top:20px;
    left:35px;
    border:1px solid white;
}
.passInput:hover {
    border:2px solid #60BF68;
}
.password {
    color:#E60716;
    font-family: 'Oswald', sans-serif;
    position:relative;
    bottom:80px;
    left:75px;
}
.login {
    color:white;
    background-color:#E60716;
    padding:5px;
    font-family: 'Oswald', sans-serif;
    border:none;
    margin:10px;
    position:relative;
    bottom:60;
    left:71;
    height:40;
    width:80;
    font-size:20px;
    border-radius:4px;
}
.login:hover {
    background-color:#B81414;
    border:1px solid black;
}
.createacc {
    position:relative;
    bottom:73px;
    font-family: 'Roboto Condensed', sans-serif;
    padding:8
}
.createone {
    text-decoration:none;
}
.createone:hover {
    text-decoration:underline;
}
.error {
    color:red;
    font-family: 'Merriweather', serif;
    font-size:10;
    position:relative;
    bottom:93px;
    text-align:center;
    opacity:0
}
/*DROP DOWN MENU
/*DEFAULT CLASSES*/
.clicked {
    color:#fff;
}
.invis {
    opacity:0;
}
/*HTML CLASSES*/
.header {
    background-color:black;
    height:50px;
    border-radius:10px;
    z-index:10;
}
li {
    color:white;
    display:inline;
    width:100%
}
.cats {
    padding:6px;
    width:100%;
    font-size:27px;
    font-family: 'Khand', sans-serif;
}
.cats .listItems:hover {
    width:100px;
    font-size:27px;
    font-family: 'Khand', sans-serif;
    color:#96F29C;
    display:inline;
    position:relative;
    padding-left:70px;
}
.cats .listItems:active {
    width:100px;
    font-size:27px;
    font-family: 'Khand', sans-serif;
    color:#318A29;
    display:inline;
    position:relative;
    padding-left:70px;
}
.listItems {
    padding:70px;
}
.dropdownHome {
    height:200px;
    width:180px;
    background-color:#9E9E9E;
    position:absolute;
    left:14px;
    bottom:210px;
    border:2px solid black;
    z-index:1;
    border-radius:13px;
    opacity:0;
}
.dropdownDashboard {
    height:200px;
    width:180px;
    background-color:#9E9E9E;
    position:absolute;
    left:255px;
    bottom:210px;
    border:2px solid black;
    z-index:1;
    border-radius:13px;
    opacity:0;
}
.dropdownContactUs {
    height:200px;
    width:180px;
    background-color:#9E9E9E;
    position:absolute;
    left:507px;
    bottom:210px;
    border:2px solid black;
    z-index:1;
    border-radius:13px;
    opacity:0;
}
.catLists {
    font-size:18px;
    text-align:center;
    position:relative;
    right:20;
    font-family: 'Ramabhadra', sans-serif;
}
.catListItem {
    color:black;
}
.welcomeBack {
    font-family: 'Oswald', sans-serif;
    color:blue;
    text-align:center;
}
.logOut {
    position:relative;
    top:130px;
    left:312px;
    padding:5px;
    border:none;
    background-color:red;
    color:white;
    width:100px;
    height:40px;
    font-size:20px;
    font-family: 'Oswald', sans-serif;
}
.logOut:hover {
    background-color:#B51919;
    border-top:1px solid #F7A3A3;
    border-left:1px solid #F7A3A3;
}

JavaScript:

$(document).ready(function() {
    $('.login').click(function(){
        var userResult = $('input[name=userInput]').val();
        var passResult = $('input[name=passInput]').val();
        if(userResult === "CodeAcademy" && passResult === "fun-coding") {
           $('.backarea').fadeOut('fast');
           $('.successLog').fadeTo('fast',1);
        };
        else {
        $('.passInput').css('border-color','red');
        $('.userInput').css('border-color','red');
        $('.error').fadeTo('fast',1);
        $('.error').effect( "bounce",{ times: 3 },"slow" );
        };
    });
});
$(document).ready(function(){
    $('#home').click(function(){
        $('.dropdownHome').slideToggle('slow');
        $('.dropdownHome').fadeTo('fast',1);
    });
});
$(document).ready(function(){
    $('#dashboard').click(function(){
        $('.dropdownDashboard').slideToggle('slow');
        $('.dropdownDashboard').fadeTo('fast',1);
    });
});
$(document).ready(function(){
    $('#contactUs').click(function(){
        $('.dropdownContactUs').slideToggle('slow');
        $('.dropdownContactUs').fadeTo('fast',1);
    });
});

A lot of the code provided might not pertain directly to the issue described. Some parts of the code are related to creating a dropdown menu that emerges along with the specified divs. The JavaScript segment seems to be the crucial part for review.

javascriptjqueryhtmlcssinput

Answer №1

var password = $('input[name=passwordField]').val();

<input type="password" class="passwordField" placeholder="Enter Password">

You are trying to get the value of an input field with the name "passwordField," however, your password field does not have a specified name.

To fix this issue, you can either assign a name to the password field or select it by its class.

Additionally, your HTML code is invalid. Input elements should not contain extra HTML and br tags need to be closed properly.

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

Revamp the Twitter button parameters or alter its settings

I'm working on a web page that includes a Twitter button. Before the button, there is an input field and a form where users can easily add relevant hashtags for the page. The goal is to take the text from the input field and populate it in the Twitter ...

javascriptjquerytwitter

Utilize JavaScript to parse JSON containing multiple object settings

After receiving the server's response, I am looking to extract the "result" from the JSON data provided. This is my JSON Input: { "header":{ "type":"esummary", "version":"0.3" }, "result":{ "28885854":{ "uid":"28885854", "pub ...

javascriptjquery

Obtain a segment of the string pathway

In this scenario, there is a file path provided below. Unlike the rest of the URL, the last part (referred to as video2.mp4) regularly changes. The language used for this project is either Javascript or Typescript. file:///data/user/0/com.sleep.app/files/ ...

javascriptregexstringtypescript

Encountering a problem while creating a Page Object in webdriver.io - getting the error "setValue is not a function" or "cannot read property 'setValue' of undefined"

While working on a webdriver.io automation project, I encountered an issue with recognizing objects in my page object file (login.po.js) when calling them in the test spec file (test.spec.js). The error message displayed is LoginPage.username.setValue is n ...

javascriptseleniummocha.jswebdriver-iowebautomation

Setting up jsonReader for jqGrid Configuration

I am having trouble displaying data in my Jqgrid. The Json data is coming from a web server, so I am attempting to format it using Jsonreader as a function. Could someone please help me identify any mistakes? Thank you in advance. Here is the code for the ...

javascripthtmljsonjqgridjsonreader

Display two examples from the material-ui documentation

My goal is to merge two demos found in the material-ui documentation. Clipped under the app bar - Describes a page layout Fixed header - Illustrates a table with a fixed header. I am looking for a solution where the table occupies the entire available p ...

cssreactjsmaterial-ui

Explore various queries and paths within MongoDB Atlas Search

I am currently working on developing an API that can return search results based on multiple parameters. So far, I have been able to successfully query one parameter. For example, here is a sample URL: http://localhost:3000/api/search?term=javascript& ...

javascriptmongodbnext.jsmongodb-atlasmongodb-atlas-search

Synchronize numerous PouchDB databases with a single CouchDB database

After reading the PouchDB documentation, I learned that sync occurs between a local database and a remote CouchDB database. Currently, I am working on developing a native application that includes a unique local database for each user (multiple databases) ...

javascriptnode.jsnosqlcouchdbpouchdb

How to store selected checkbox values in an array using AngularJS

Check out this code snippet: <tr ng-repeat="doc in providers"> <td><input type="checkbox" ng-true-value="{{doc.provider.Id}}" ng-false-value="" ng-model="ids"></td> </tr> {{ids}} I am trying to store the values of ...

javascripthtmlangularjsangularjs-scopeangularjs-ng-repeat

Tips for aligning a cluster of floating buttons at the center in Vuetify:

This is the code I am currently working with: <v-container height="0"> <v-row align="center" justify="center"> <v-hover v-slot:default="{ hover }" v-for="(option, index) in options" ...

htmlcssvue.jsvuetify.js

Determine whether a component is linked to an event listener

If a <Form> component is called with a @cancel event listener attached to it, the cancel button that triggers this event should be visible. If no @cancel event is present, the cancel button should not be displayed. Is there a method to verify if a c ...

javascriptvue.jsvuejs2vue-component

Guide on inserting HTML text box form input into Express route parameter

I'm currently working on implementing a feature that allows users to search through my mongo database using an endpoint structured like this: app.get('/search/:input', function(req, res){ console.log(`get request to: /members/${req.params ...

javascripthtmlnode.jsmongodbexpress

Sometimes, the submission of a form using jQuery/Ajax only seems to be successful every second attempt

I'm having trouble with submitting a form that involves file upload using Ajax/jQuery, processing it through a PHP script, and displaying the result in the original div where the form was located. Here is my current form code: <section id="conten ...

phpjqueryajaxformsyui

Tips on arranging check-boxes horizontally in this code repository

We are working with an autogen form in PHP, and the way the checkboxes are currently displayed is demonstrated in the following code: case FIELD_CHECK_BOX: $fieldHtml = printCheckbox($mode, $field->getId().'[]', $field->get ...

phphtml

Tips for incorporating jQuery val() into a span element!

I am currently working on a plugin that involves interacting with select elements grouped within a span. I want to enhance the functionality of my plugin by adding support for the val() function, which will allow users to easily get or set the 'value& ...

javascriptjquerydomjquery-pluginshtml

Is it possible to modify a JavaScript array variable without having to refresh the page by utilizing Ajax?

Is it possible to update a JavaScript array variable without having to reload or refresh the page? I have an existing list of data in an array, and I retrieve additional data using PHP and Ajax. Now I want to add the new data obtained from PHP Ajax to th ...

phpjavascriptajax

Displaying a Jquery slider by clicking on links

I am interested in setting up a slider for two different forms. Specifically, I plan to have one form labeled Form 1 and another labeled Form 2 displayed as text. When users click on Form 1, a table containing the form will slide out from underneath the ...

javascriptjquery

It is not possible to make a comparison between two Strings within a JSP file

I have this unique JSP file that contains the following code: <SELECT name="brandsFrom" onchange="as()"> <c:forEach items="${brandsSelectedList}" var="brands"> <c:if test="${brands.name == nam}"> <option value="${b ...

javajqueryajaxjsp

Is there a way to reverse the hover effect on div elements?

Let's start by examining the code I've written: HTML: <div class="button_container"> <div class="inner_button"> <a href="#" class="button_text">Button</a> </div> <div class="button_side"> ...

javascriptjqueryhtmlcsshover

Obtain template from AngularJS and transmit data to template

<section ng-app="app" ng-controller="ctrl"> <div id="output">{{ foo }}</div> <button ng-click="myFun()">Click me</button> </section> var app = angular.module("app", []); app.controller('ctrl', funct ...

javascriptangularjs