CODEWITHSUNDEEP
javascripthtmlforms
Thomas
Thomas

Reputation: 72

How to check arrays values against user inputted values using JavaScript?

Beginner to JavaScript and HTML5 (learned it a while ago and have not used it till today).

So, I spent some time looking online for an answer to this, but could not find what I was looking for (maybe I'm missing something). The issue I'm having is that I have created a form that asks a user for their name, ID, and email if needed. Now, in the real world, the IDs and names would be stored in a database where the user input data would be checked against the database; but because this is a class assignment, we were asked to create an array of three students to be checked against the user input data.

This my code for the HTML5 website:

<!DOCTYPE html>
<html lang = "en">
<head>
<title>Student Transaction Form</title>
<meta charset="UTF-8"/>
<style>
p  {
    color: red;
    font-family: Times New Roman, serif;
    font-size: 160%;
 }
</style>
</head>
<body>
<div style="text-align:center;">
<FORM METHOD="POST" id="the-form" action="#" >
<TABLE BORDER="1" align = "center" >
<caption style="font-size:30px">Student Transaction Form</caption>
  <TR>
    <TD style="font-size:18px">Student Name:</TD>
    <TD>
      <INPUT TYPE="TEXT" required = "required" placeholder = "Input Name" NAME="name" SIZE="25">
    </TD>
	<TD style="font-size:18px"><p>Required</p></TD>
  </TR>
  <TR>
    <TD style="font-size:18px">Student Number:</TD>
    <TD><INPUT TYPE="TEXT" pattern=".{8,8}" required = "required" placeholder = "Input Number" NAME="number" SIZE="25"></TD>
	<TD style="font-size:18px"><p>Required</p></TD>
  </TR>
  <TR>
    <TD style="font-size:18px">Student Email:</TD>
    <TD><INPUT TYPE="email" NAME="email" SIZE="25" ></TD>
	<TD style="font-size:18px">
	    <script type="text/javascript">
        function ShowHideDiv(chkEmail) 
		{
            var dvEmail = document.getElementById("dvEmail");
            dvEmail.style.display = chkEmail.checked ? "block" : "none";
        }
	    </script>
	
<div id="dvEmail" style="display: none">
    <p>Required</p>
    </div>
    </TD>
  </TR>
  <TR>
  <TD></TD>
    <TD>
 <form id = "form1">
 <label for="chkEmail">
    <input type="checkbox" id="chkEmail" onclick="ShowHideDiv(this)" />
    Email me a transaction comfirmation
</label>
</form></TD>
  </TR>
</TABLE>
<P><INPUT TYPE="SUBMIT" VALUE="Submit" NAME="B1"></P>
</FORM>
</body>

The code at the moment just makes sure the password (ID) is valid (has 8 chars) and, if the checkbox is checked, requires an email.

So, the question I have is: how to create an array with students name and ID connected to each other (meaning that if the name is correct but the ID is to a different person it would mark as incorrect) and how to run a check with the user input data?

An example would be that if the user typed Bill Smith for the name and 59683471 in the ID box, when submitting it would check to see if a Bill Smith with an ID of 59683471 exists; and if not, disallow the submission. If they do exist, then all is good and the form can be submitted.

Thank you.

Edit:

Function:

<script type ="text/javascript">
function checkall(Submit)
{
var name = document.getElementById("studentName").value;
var id = document.getElementById("studentNumber").value;
	var studentArray = 
	[
	{"Name": "Thomas Livshits", "Id": "33138463"},
	{"Name": "James Maro", "Id": "33138743"},
	{"Name": "Bill Smith", "Id": "33138356"},
	];
studentArray.forEach(function(student){
    if(id == student.Id && name == student.Name)
        console.log("Found a match for student: " + student.Name);
});
}
</script>

and for the submit part:

<P><INPUT TYPE="SUBMIT" id = "Submit" VALUE="Submit" NAME="B1" onsubmit = "checkall(this); return false;"></P>

Upvotes: 0

Views: 231

Answers (4)

Michael Seltene
Michael Seltene

Reputation: 591

I think the best approach to this is to put all scripts on .js file and all CSS in .css file and let the HTML have a clean code. Please see below for just an example. In addition, please find the code to test on https://jsfiddle.net/uyg3xvgz/.

HTML

<!DOCTYPE html>
 <html>
  <head>
   <meta charset="utf-8">
   <title>Student Transaction Form</title>
   <!-- CSS file include -->
   <link rel="stylesheet" href="css.css">
  </head>
  <body>
    <div class="container">
     <form id="contact" action="#" method="post">
      <h3>Student Transaction Form</h3>
      <h4>Please fill the form below.</h4>
      <fieldset>
        <input placeholder="Your name" type="text" tabindex="1" id="student_name" required autofocus>
      </fieldset>
      <fieldset>
        <input placeholder="Your ID" type="text" tabindex="2" id="student_id" required>
      </fieldset>
      <fieldset>
        <input placeholder="Your Email Address" type="email" tabindex="3" id="student_email">
      </fieldset>
      <fieldset>
        <button name="submit" type="submit" id="submit_form">Submit</button>
      </fieldset>
      <p class="copyright">Designed by <a href="https://colorlib.com" target="_blank" title="Colorlib">Colorlib</a></p>
    </form>
  </div>
  <!-- JavaScript file include -->
  <script type="text/javascript" src="js.js"></script>
 </body>
</html>

CSS

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic);
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
 font-family: "Roboto", Helvetica, Arial, sans-serif;
 font-weight: 100;
 font-size: 12px;
 line-height: 30px;
 color: #777;
 background: #4CAF50;
}

.container {
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea,
#contact button[type="submit"] {
 font: 400 12px/16px "Roboto", Helvetica, Arial, sans-serif;
}

#contact {
 background: #F9F9F9;
 padding: 25px;
 margin: 150px 0;
 box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

#contact h3 {
 display: block;
 font-size: 30px;
 font-weight: 300;
 margin-bottom: 10px;
}

#contact h4 {
 margin: 5px 0 15px;
 display: block;
 font-size: 13px;
 font-weight: 400;
}

fieldset {
 border: medium none !important;
 margin: 0 0 10px;
 min-width: 100%;
 padding: 0;
 width: 100%;
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea {
 width: 100%;
 border: 1px solid #ccc;
 background: #FFF;
 margin: 0 0 5px;
 padding: 10px;
}

#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact input[type="url"]:hover,
#contact textarea:hover {
 -webkit-transition: border-color 0.3s ease-in-out;
 -moz-transition: border-color 0.3s ease-in-out;
 transition: border-color 0.3s ease-in-out;
 border: 1px solid #aaa;
}

#contact textarea {
 height: 100px;
 max-width: 100%;
 resize: none;
}

#contact button[type="submit"] {
 cursor: pointer;
 width: 100%;
 border: none;
 background: #4CAF50;
 color: #FFF;
 margin: 0 0 5px;
 padding: 10px;
 font-size: 15px;
}

#contact button[type="submit"]:hover {
 background: #43A047;
 -webkit-transition: background 0.3s ease-in-out;
 -moz-transition: background 0.3s ease-in-out;
 transition: background-color 0.3s ease-in-out;
}

#contact button[type="submit"]:active {
 box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.copyright {
 text-align: center;
} 

#contact input:focus,
#contact textarea:focus {
 outline: 0;
 border: 1px solid #aaa;
}

::-webkit-input-placeholder {
 color: #888;
}

:-moz-placeholder {
  color: #888;
}

::-moz-placeholder {
 color: #888;
}

:-ms-input-placeholder {
 color: #888;
}

JS

let validate_user = () => {
  //declare variables
  let ob = {},
   student_name = "",
   student_id = "",
   student_email = "";

  // initialize variables
  student_name = document.getElementById("student_name").value;
  student_id = document.getElementById("student_id").value;
  student_email = document.getElementById("student_email").value;

  //add object to simulate as a database
  ob['john'] = {name: "john", ID: "123", email: "[email protected]"};
  ob['michael'] = {name: "michael",ID: "456", email: "[email protected]"};
  ob['smith'] = {name: "smith",ID: "789", email: "[email protected]"};

  let finder = (ob, student_name, student_id) => {
   // declare variable
   let res = "";

   // search function | returns found object or 0
   let search = (ob, search_value) => {
     return (search_value in ob ? ob[search_value] : 0);
   }
   return search(ob, student_name).ID === student_id ? res = "Logged In" : res = "Oops, wrong user or ID";
 };

 //alert user
  alert(finder(ob, student_name, student_id));
}

//add event listener to submit button
document.getElementById("submit_form").addEventListener("click", validate_user);

Upvotes: 0

Luke
Luke

Reputation: 1033

You would want to create a nested array like the following:

var userArray = [
    {name: "firstUser", ID: "firstID", email: "firstEmail"},
    {name: "secUser", ID: "secID", email: "secEmail"}, ...
]

And then prepare a loop:

var name = document.getElementById("NAME_DIV").value;
var id = document.getElementById("ID_DIV").value;
var email = document.getElementById("EMAIL_DIV").value;

for (i=0; i<userArray.length; i++) {
    var a = userArray[i].name;
    var b = userArray[i].ID;
    var c = userArray[i].email;

    if (a == name && b == id && c == email) {
         //do something
    };
};

Hope this helps! Typed it on my phone so might be a small syntax error but the logic should get you what you're looking for!

Upvotes: 1

Spencer Wieczorek
Spencer Wieczorek

Reputation: 21575

I would add a id attribute to the student ID and name input elements. Then use document.getElementById(...).value to get the value of each element. For example with Student Name you would do:

<INPUT TYPE="TEXT" id = "studentName" ... NAME="name" SIZE="25">

Then get the value by doing document.getElementById("studentName").value. Next you could create an array of objects, which that object having two properties with one for the Name and one for Id.

var studentArray = [
    {"Name": "StudentName1", "Id": "id_1"},
    {"Name": "StudentName2", "Id": "id_2"},
    ...
];

Then finally for checking you can loop through that array and check if both the Name and Id property of the array item match the input. Below is a simple example:

var inputStudentID = "id_2";
var inputStudentName = "StudentName2";

var studentArray = [
    {"Name": "StudentName1", "Id": "id_1"},
    {"Name": "StudentName2", "Id": "id_2"},
    {"Name": "StudentName3", "Id": "id_3"}
];

studentArray.forEach(function(student){
    if(inputStudentID == student.Id && inputStudentName == student.Name)
        console.log("Found a match for student: " + student.Name);
});

Upvotes: 0

Waxi
Waxi

Reputation: 1651

You could do a simple multidimensional array like this...

var myUsers = [
    ['Bill Smith', '59683461'],
    ['Jane Doe', '23423526']
];

Then you look up the user in the array and find their ID in the next index. By the way, there are multiple ways of looking up a value in an array.

Upvotes: 0

Related Questions