Analyzing registration details stored in an array against user login credentials

With two buttons available - one for sign up and the other for log in, my goal is to gather input form values from the sign-up section into an array. Following this, I aim to compare the user input from the sign-up with that of the log-in, informing the user once they are logged in. While I have not yet delved into localStorage and JSON, I prefer to achieve this using arrays initially.

I've experimented with for loops and if statements incorporating logical operators (&&).

$(document).ready(function() {
$("#userSignUp").click(function() {
$("#signUpForm").show();
$("#signup").hide();
});
$("#userInfo").click(function(event) {

    var custName = $("#newName").val();
    var custEmail = $("#newEmail").val();
    var custPass = $("#newPass").val();
    var custData = [];
    custData.push(custName, custEmail, custPass);
    $("#userSignUp").text("Thank you for signing up!");
});
$("#userLogIn").click(function() {
    $("#loginForm").show();
    $("#login").hide();
});
$("#userData").click(function(event) {
    var currentName = $("#userName").val();
    var currentEmail = $("#userEmail").val();
    var currentPass = $("#userPass").val();
    for (var i = 0; i < custData.length; i++) {
  if ((currentName === custData[0]) && currentEmail === custData[1] && currentPass === custData[2]) {
            $("#userLogIn").text("You are logged in!");
        } else {
            $("#userLogIn").text("Please enter correct name, email and password!");
       }
    };
});

});

Answer №1

Perhaps, instead of using a loop, you could try implementing just an IF statement. This code snippet checks if the items are present in the array and if they are, it will execute certain actions:

if (custData.indexOf(currentName) != -1 
   && custData.indexOf(currentEmail) != -1 
   && custData.indexOf(currentPass) != -1) {
$("#userLogIn").text("You are successfully logged in!");
} else {
$("#userLogIn").text("Please make sure to enter the correct name, email, and password!");

Answer №2

Recently, I have delved into the world of localStorage and decided to apply it to a task at hand. The process involved capturing user input values during sign-up and storing them in local Storage. Subsequently, I retrieved these stored values using localStorage. Below is an excerpt of the code I utilized:

$(document).ready(function() {
 $("#userSignUp").click(function() {
  $("#signUpForm").show();
    $("#signup").hide();
 });
$("#userInfo").click(function(event) {
 var custName = $("#newName").val();
 var custEmail = $("#newEmail").val();
 var custPass = $("#newPass").val();
 localStorage.setItem("name", "Raych") +
 localStorage.setItem("email", "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3341524a505b73545e525a5a1d505c5e">[email protected]</a>") +
 localStorage.setItem("password", "hey");   ;
 $("#userSignUp").text("Thank you for signing up!");
});
$("#userLogIn").click(function() {
 $("#loginForm").show();
 $("#login").hide();
});
$("#userData").click(function(event) {
 event.PreventDefault;
 var currentName = $("#userName").val();
 var currentEmail = $("#userEmail").val();
 var currentPass = $("#userPass").val();
 localStorage.getItem("name") +
 localStorage.getItem("email") +
 localStorage.getItem("password");      
 $("#userLogIn").text("You are logged in!");
 });
});

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

What is the best method for determining the central position of a .dae file and adjusting its placement?

As I work with numerous 3D models, I have noticed that many of them are not centered properly. Is there a method to determine the dimensions (length for x, width for z, height for y) of a model and divide it by two in order to accurately position the model ...

Learn how to effectively transfer data from $.getjson to PHP, specifically through the use of Laravel's @foreach loop

$.getJSON( 'http://localhost/media_books/index.php/new_books.json?provider_id=1&limit=99&offset=1') .done(function( json ) { $(tar).closest('.accordion').children('div').text(json); }); I have successfully obtaine ...

What is the best method to make a hyperlink within an IFrame open in a new window?

Let me share the code I've been working on: <!DOCTYPE html> <html> <head> <base target="_blank"> </head> <body> <div style="border: 2px solid #D5CC5A; overflow: hidden; margin: 15px auto; max-width: 800px; ...

Combine an array of arrays with its elements reversed within the same array

I am working with an array of numbers that is structured like this: const arrayOfArrays: number[][] = [[1, 2], [1, 3]]; The desired outcome is to have [[1, 2], [2, 1], [1, 3], [3, 1]]. I found a solution using the following approach: // initialize an e ...

How can I retrieve data from a script tag in an ASP.NET MVC application?

I'm struggling to figure out how to properly access parameters in a jQuery call. Here is what I currently have: // Controller code public ActionResult Offer() { ... ViewData["max"] = max; ViewData["min"] = min; ... return View(paginatedOffers ...

What are the best scenarios for implementing jQuery-ui plugin as opposed to Backbone View?

I am feeling uncertain about the concept of "componentization" in web UI development. When I need a component, should I develop my own jQuery-UI plugin or opt for creating a MarionetteComponent if I am using Backbone.Marionette? Both options provide reusa ...

Maintain button activation status even upon reloading the page (utilizing PHP and HTML)

Is it possible to maintain the active state of a button even after reloading the page without using custom CSS, only Bootstrap? I am using PHP and the buttons function as a switch for ON or OFF in an if condition. HTML <div style="margin-top: 20px ...

Transfer an Array of Objects containing images to a POST API using Angular

Looking to send an array of objects (including images) to a POST API using Angular and Express on the backend. Here's the array of objects I have: [{uid: "", image: File, description: "store", price: "800"} {uid: "f ...

I could really use some assistance with this project for my friend

Whenever I click on the image, it only displays two out of the three possible alerts. How can I make it show all three? Here's my code: <!DOCTYPE html> <html> <head> </head> <body> <img src="http://www.build ...

How can I use jQuery to display a larger image in a specific div when a thumbnail is clicked?

My current setup involves a div that serves as a target: <div id="rightbox"></div> I have my thumbnail images neatly organized into groups: <img src="group1/thumb/01.png" width="160" height="97" class="imgtopleft" /> <img src="group ...

Challenge with the positioning of HTML output layout

Is there a way to center the output/result of the HTML code below both horizontally and vertically on the web page using CSS? I have tried the following code but it only centers the output horizontally. Vertical alignment is not working properly. Can someo ...

Navigating through a JSON dictionary in Svelte: A step-by-step guide

When working with Svelte, the #each construct allows for easy iteration over array-like objects. But what if you have a JSON dictionary object instead? Is there a way in Svelte to iterate over this type of object in order to populate a dropdown menu? The ...

knockout.js' $root leads to a page displaying nothing

Using the $root binding context is resulting in a blank page for me. Removing it allows the page to load properly. Causing blank page: <td><input data-bind="value: name" /></td> <td><select data-bind="options: $root.availableMe ...

Modify the date format inside the content of an HTML element or its descendants (excluding their attributes)

I have been trying to reformat some dates using JavaScript. My initial approach was: var regex = /(\d{4})-(\d{2})-(\d{2})/g; $('.container td').each(function() { $(this).html($(this).html().replace(regex, '$3-$2-$1')); ...

What is the best way to ensure that a mapped type preserves its data types when accessing a variable?

I am currently working on preserving the types of an object that has string keys and values that can fall into two possible types. Consider this simple example: type Option1 = number type Option2 = string interface Options { readonly [key: string]: Op ...

Creating a HTML and JavaScript carousel without relying on the animate function

I am currently facing some challenges with building a custom slider. While it moves forward smoothly using CSS animation, I'm struggling to implement a backward motion with an animation. It seems like I need to loop through the slides and try a differ ...

Splinter: Extracting XPATH text fragments that do not comprise distinct elements

How can I extract and store the text of the first, underlined, and last parts of the question using Splinter? Refer to the HTML below. I aim to assign the following values to variables: first_part = "Jingle bells, jingle bells, jingle all the" second_par ...

Activating the Speech Recognition feature in a form triggers the submission of a post

Currently, I am integrating webkitspeechRecongition into a form to allow users to enter data using their voice by pressing a button. However, a challenge arises when the call is triggered by a button within the form as it results in a post/submit action th ...

Basic jQuery template design

Currently, I am developing a user interface that allows users to add or delete items with a similar layout. The process starts with one item and by clicking 'add', more items can be added. These items come in several different types. My current ...

Tips for developing integration tests for medium-sized nodejs applications with heavy reliance on 3rd party APIs

I am the owner of a medium-sized nodejs application that can be found on GitHub under the link here. This application heavily relies on various 3rd party APIs to function. Essentially, the purpose of this app is to make calls to different Salesforce APIs, ...