I'm trying to build an array in javascript from user input on my HTML form. It seems the array is building fine until it gets to the .push, I then get an error
employeeid undefined
, even though I know it's being populated and I can see this when I run debug mode.
HTML
<div class="wel" align="left">
<form class="form-signin">
<p>
<input type="text" class="form-control" id="EmployeeID" name="EmployeeID" placeholder="EmployeeID" required="" autofocus="" />
</p>
<p>
<input type="text" class="form-control" id="fullname" name="fullname" placeholder="FullName" required="" autofocus="" />
</p>
<p>
<input type="text" class="form-control" id="username" name="username" placeholder="UserName" required="" autofocus="" />
</p>
<p>
<input type="email" class="form-control" id="Email" name="Email" placeholder="Email" required="" autofocus="" />
</p>
<p>
<input type="password" class="form-control" id="Password" name="Password" placeholder="password" required="" autofocus="" />
</p>
<p>
<input type="password" class="form-control" id="Password1" name="ConfirmPassword" placeholder="password" required="" autofocus="" />
</p>
<a id='subButton' class="btn btn-primary btn-lg" style="vertical-align: bottom">submit</a>
</form>
</div
javascript
$(document)
.ready(function() {
var arrayDetails = new Array();
var holdingArray = new Array();
function newEntry(employeeId, fullname, username, email, password) {
this.employeeId = employeeId;
this.fullname = fullname;
this.username = username;
this.email = email;
this.Password = password;
}
$("#subButton")
.click(function () {
debugger;
var success = true;
var password = document.getElementById("Password");
var password1 = document.getElementById("Password1");
if (password.value !== password1.value)
{
alert("Password do not match");
}
else
{
var employeeIdEntered = document.getElementById("EmployeeID").value;
if (employeeIdEntered === "") {
success = false;
}
var fullnameentered = document.getElementById("fullname").value;
if (fullnameentered === "") {
success = false;
}
var usernameEntered = document.getElementById("username").value;
if (usernameEntered === "") {
success = false;
}
var emailEntered = document.getElementById("Email").value;
if (emailEntered === "") {
success = false;
}
var passwordEnterned = document.getElementById("Password").value;
if (passwordEnterned === "") {
success = false;
}
var entry = newEntry(employeeIdEntered,
fullnameentered,
usernameEntered,
emailEntered,
passwordEnterned);
arrayDetails.push(entry);
};
if (success)
{
sendToController();
} else
{
alert("");
}
});
Your newEntry() function is missing a return statement. Don't add the attributes to this, do instead a
function newEntry(employeeId, fullname, username, email, password) {
var res = {};
res.employeeId = employeeId;
res.fullname = fullname;
res.username = username;
res.email = email;
res.Password = password;
return res;
}
Related
This question already has an answer here:
Why is the value of my input always empty if I store it in a variable?
(1 answer)
Closed 2 years ago.
Ive got this piece of code:
<form class="register" id="reg-form">
<input type="text" class="input-box" placeholder="Username" id="username" required><br><br>
<input type="text" class="input-box" placeholder="Full Name" id="name" required><br><br>
<input type="email" class="input-box" placeholder="Email" id="email" required><br><br>
<input type="password" class="input-box" placeholder="Password" id="password" required><br><br>
<input type="password" class="input-box" placeholder="Repeat Password" id="passwordrep" required><br><br><br>
<button class="btn-rounded-md black" id="reg-btn">Register</button>
</form>
and this js:
window.onload = function() {
var email = document.getElementById('email').value;
var password = document.getElementById('password').value;
var reppassword = document.getElementById('passwordrep').value;
document.getElementById('reg-form').addEventListener('submit', function(e) {
e.preventDefault();
if (password == reppassword) {
console.log("Passwords match. Submitting...");
auth.createUserWithEmailAndPassword(email, password).then(userCredential => {
console.log('Signed up!');
});
}
});
}
but all vars created at the start of the js return all null. Any ideas?
You're retrieving the values on pageload, not on submit; they'll always be empty (not null, but the empty string). Change to:
document.getElementById('reg-form').addEventListener('submit', function(e) {
e.preventDefault();
var email = document.getElementById('email').value;
var password = document.getElementById('password').value;
var reppassword = document.getElementById('passwordrep').value;
if (password == reppassword) {
console.log("Passwords match. Submitting...");
auth.createUserWithEmailAndPassword(email, password).then(userCredential => {
console.log('Signed up!');
});
}
});
I am developing a Registration form for my assignment. All things are working but when I click on the submit button, the warning messages on the label are just shown for a very short period of time. I am using eclipse and apache tomacat. here is my code.
JSP Code:
<form method="post">
<h2>Welcome to AP Auctions. Please Enter Bid</h2>
<span id="msg" style="color:red;font-size:25px"></span><br/>
<label id="itemid_l">Item Id:</label> <input type="text" name="itemid" id="itemid"/><br/>
<label id="itemname_l">Item Name:</label> <input type="text" name="itemname" id="itemname"/><br/>
<label id="uname_l">Your Name:</label> <input type="text" name="uname" id="uname"/><br/>
<label id="email_l">Your Email Address:</label> <input type="text" name="email" id="email"/><br/>
<label id="amount_l">Amount Bid:</label> <input type="number" name="amount" id="amount"/><br/>
<label id="autoincrement_l">Auto-increment to match other bidders:</label><input type="checkbox" name="autoincrement" id="autoincrement"><br/>
<input type="submit" value="Submit Bid" onclick="validate()"/>
</form>
Javascript Code:
function validate()
{
var itemid=document.getElementById("itemid").value;
var itemname=document.getElementById("itemname").value;
var uname=document.getElementById("uname").value;
var email=document.getElementById("email").value;
var amount=document.getElementById("amount").value;
var autoincrement=document.getElementById("autoincrement");
var flag=true;
if(itemid.length==0){
flag=false;
document.getElementById("itemid_l").innerHTML="<b>Required field!</b> Item Id: ";
}
if(itemname.length==0){
flag=false;
document.getElementById("itemname_l").innerHTML="<b>Required field!</b> Item Name: ";
}
if(uname.length==0){
flag=false;
document.getElementById("uname_l").innerHTML="<b>Required field!</b> Your Name: ";
}
if(email.length==0){
flag=false;
document.getElementById("email_l").innerHTML="<b>Required field!</b> Your Email Address: ";
}
if(amount.length==0){
flag=false;
document.getElementById("amount_l").innerHTML="<b>Required field!</b> Amount Bid: ";
}
if(!autoincrement.checked){
flag=false;
document.getElementById("autoincrement_l").innerHTML="<b>Required field!</b> Auto-increment to match other bidders:: ";
}
if(flag==true){
alert('Good job!!');
return true;
}
else
{
document.getElementById("msg").innerHTML="Required data is missing. Please fill";
return false;
}
}
Any suggestion will help me a lot..
You can use onsubmit event so that whenever user click on submit button this gets call and if the function validate() return true form will get submitted else it will not submit form .
Demo code :
function validate() {
var itemid = document.getElementById("itemid").value;
var itemname = document.getElementById("itemname").value;
var uname = document.getElementById("uname").value;
var email = document.getElementById("email").value;
var amount = document.getElementById("amount").value;
var autoincrement = document.getElementById("autoincrement");
var flag = true;
if (itemid.length == 0) {
flag = false;
document.getElementById("itemid_l").innerHTML = "<b>Required field!</b> ";
} else {
//if fill remove error any
document.getElementById("itemid_l").innerHTML = ""
}
if (itemname.length == 0) {
flag = false;
document.getElementById("itemname_l").innerHTML = "<b>Required field!</b> ";
} else {
//if fill remove error any
document.getElementById("itemname_l").innerHTML = "";
}
if (uname.length == 0) {
flag = false;
document.getElementById("uname_l").innerHTML = "<b>Required field!</b> ";
} else {
document.getElementById("uname_l").innerHTML = "";
}
if (email.length == 0) {
flag = false;
document.getElementById("email_l").innerHTML = "<b>Required field!</b> ";
} else {
document.getElementById("email_l").innerHTML = "";
}
if (amount.length == 0) {
flag = false;
document.getElementById("amount_l").innerHTML = "<b>Required field!</b>";
} else {
document.getElementById("amount_l").innerHTML = "";
}
if (!autoincrement.checked) {
flag = false;
document.getElementById("autoincrement_l").innerHTML = "<b>Required field!</b>";
} else {
document.getElementById("autoincrement_l").innerHTML = "";
}
if (flag == true) {
document.getElementById("msg").innerHTML = "";
alert('Good job!!');
flag = true; //do true
} else {
document.getElementById("msg").innerHTML = "Required data is missing. Please fill";
flag = false; //do false
}
return flag; //return flag
}
<!--add onsubmit -->
<form method="post" id="forms" onsubmit="return validate()">
<h2>Welcome to AP Auctions. Please Enter Bid</h2>
<span id="msg" style="color:red;font-size:25px"></span><br/>
<!--give id to span instead of label-->
<label> <span id="itemid_l"></span>Item Id:</label> <input type="text" name="itemid" id="itemid" /><br/>
<label><span id="itemname_l"></span>Item Name:</label> <input type="text" name="itemname" id="itemname" /><br/>
<label><span id="uname_l"></span>Your Name:</label> <input type="text" name="uname" id="uname" /><br/>
<label><span id="email_l"></span>Your Email Address:</label> <input type="text" name="email" id="email" /><br/>
<label><span id="amount_l"></span>Amount Bid:</label> <input type="number" name="amount" id="amount" /><br/>
<label><span id="autoincrement_l"></span>Auto-increment to match other bidders:</label><input type="checkbox" name="autoincrement" id="autoincrement"><br/>
<input type="submit" value="Submit Bid" />
</form>
Also , if you just need to check for empty field you can just use required attribute on input tag like below :
<form method="post">
<h2>Welcome to AP Auctions. Please Enter Bid</h2>
<span id="msg" style="color:red;font-size:25px"></span><br/>
<!--added required attribute-->
<label id="itemid_l">Item Id:</label> <input type="text" name="itemid" id="itemid" required/><br/>
<label id="itemname_l">Item Name:</label> <input type="text" name="itemname" id="itemname" required/><br/>
<label id="uname_l">Your Name:</label> <input type="text" name="uname" id="uname" required/><br/>
<label id="email_l">Your Email Address:</label> <input type="text" name="email" id="email" required/><br/>
<label id="amount_l">Amount Bid:</label> <input type="number" name="amount" id="amount"required/><br/>
<label id="autoincrement_l">Auto-increment to match other bidders:</label><input type="checkbox" name="autoincrement" id="autoincrement" required><br/>
<input type="submit" value="Submit Bid"/>
</form>
So I'm trying to check if the user inputs the same email address and password twice in a signup form using javascript. It shouldn't let them sign up if they don't match, however only the portion of the passwords is working and the email isn't working. Here's my code:
<form>
<input type="email" name="fname" placeholder="Email Adress" required="required" class="input-txt" id="email1">
<input type="email" name="fname" placeholder="Confirm Email Adress" required="required" class="input-txt" id="email2">
<br><br>
<input id="password" type="password" name="fname" placeholder="Create Password" required="required" class="input-txt">
<input id="confirm_password" type="password" name="fname" placeholder="Confirm Password" required="required" class="input-txt"><br>
<button type="submit" class="btn">Sign up</button>
</form>
<script>
function validateMail() {
if(first_email.value != second_email.value) {
email2.setCustomValidity("Emails Don't Match");
} else {
email2.setCustomValidity('');
}
}
email1.onchange = validateMail;
email2.onkeyup = validateMail;
var password = document.getElementById("password")
, confirm_password = document.getElementById("confirm_password");
function validatePassword(){
if(password.value != confirm_password.value) {
confirm_password.setCustomValidity("Passwords Don't Match");
} else {
confirm_password.setCustomValidity('');
}
}
password.onchange = validatePassword;
confirm_password.onkeyup = validatePassword;
</script>
You need to assign var in top of the script:
var first_email = document.getElementById("email1")
, second_email = document.getElementById("email2")
, password = document.getElementById("password")
, confirm_password = document.getElementById("confirm_password");
On submitting an empty form I'm receiving the respective errors but I want to remove the error (when they meet the requirement) as I proceed to the next input. Also can anyone give me a solution to do the same with the help of loops. Only JavaScript solution please.
Here's my JS and HTML code..
function validate() {
var letter = /[a-zA-Z]/;
var number = /[1-9]{1}[0-9]{2}/;
var mail = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+#[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
var valid = true;
var firstname = information.first.value;
var lastname = information.last.value;
var address = information.Add.value;
var email = information.Email.value;
var pass = information.Pass.value;
var re_pass = information.Repass.value;
var phone = information.mobile.value;
if (firstname === "" || !letter.test(firstname)) {
document.getElementById("fn").innerHTML = "*Enter your First Name*";
console.log("first");
valid = false;
} else {
document.getElementById("fn").innerHTML = "";
}
if (lastname === "" || !letter.test(lastname)) {
document.getElementById("ln").innerHTML = "*Enter your Last Name*";
console.log("last");
valid = false;
} else {
document.getElementById("ln").innerHTML = "";
}
if (email === "" || !mail.test(email)) {
document.getElementById("mail").innerHTML = "*Enter your Email*";
console.log("mail");
valid = false;
} else {
document.getElementById("mail").innerHTML = "";
}
if (pass === "" || !letter.test(Pass)) {
document.getElementById("pwd").innerHTML = "*Enter your Password*";
console.log("password");
valid = false;
} else {
document.getElementById("pwd").innerHTML = "";
}
if (re_pass === "" || re_pass != pass) {
document.getElementById("repass").innerHTML = "*Password didn't match*";
console.log("reenter");
valid = false;
} else {
document.getElementById("repass").innerHTML = "";
}
if (phone == "" || !number.test(phone)) {
document.getElementById("no").innerHTML = "*Enter your Phone number";
console.log("phone");
valid = false;
} else {
document.getElementById("no").innerHTML = "";
}
return valid;
}
<!DOCTYPE html>
<html>
<head>
<title>information</title>
<link rel="stylesheet" type="text/css" href="info.css">
<script type="text/javascript" src="info.js"></script>
</head>
<body>
<div id="form">
<form action="#" method="POST" onsubmit="return validate()" name="information">
<label>Firstname:</label>
<input type="text" name="firstname" placeholder="Enter your name" id="first" autofocus>
<span id="fn"></span><br><br>
<label>Lastname:</label>
<input type="text" name="lastname" placeholder="Enter last name" id="last">
<span id="ln"></span><br><br>
<label>Address:</label>
<input type="text" name="address" placeholder="Address" id="Add">
<span id="add"></span><br><br>
<label>Email:</label>
<input type="email" name="mail" placeholder="Email" id="Email">
<span id="mail"></span><br><br>
<label>Password:</label>
<input type="password" name="password" placeholder="Password" id="Pass">
<span id="pwd"></span><br><br>
<label>Retype Password:</label>
<input type="password" name="retype" placeholder="Retype password" id="Repass">
<span id="repass"></span><br><br>
<label>Phone:</label>
<input type="text" name="firstname" placeholder="XXXXXXXXXX" id="mobile" maxlength = "10">
<span id="no"></span><br><br>
<input type="submit" name="submit" value="submit">
</form>
</div>
</body>
</html>
Perhaps this?
var letter = /[a-zA-Z]/;
var number = /[1-9]{1}[0-9]{2}/;
var mail = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+#[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
function validate() {
var information = document.querySelector("#form>form");
var error = 0;
var firstname = information.first.value;
var lastname = information.last.value;
var address = information.Add.value;
var email = information.Email.value;
var pass = information.Pass.value;
var re_pass = information.Repass.value;
var phone = information.mobile.value;
error += firstname === "" || !letter.test(firstname)
document.getElementById("fn").innerHTML = error?"*Enter your First Name*":"";
error += lastname === "" || !letter.test(lastname)
document.getElementById("ln").innerHTML = error?"*Enter your Last Name*":"";
error += email === "" || !mail.test(email)
document.getElementById("mail").innerHTML = error?"*Enter your Email*":"";
error += pass === "" || !letter.test(Pass)
document.getElementById("pwd").innerHTML = error?"*Enter your Password*":"";
error += re_pass === "" || re_pass !== pass
document.getElementById("repass").innerHTML = error?"*Password didn't match*":"";
error += phone === "" || !number.test(phone)
document.getElementById("no").innerHTML = error ? "*Enter your Phone number":"";
return error>0?false:true;
}
document.querySelector("#form>form").oninput = validate;
document.querySelector("#form>form").onsubmit = validate;
<div id="form">
<form action="#" method="POST" name="information">
<label>Firstname:</label>
<input type="text" name="firstname" placeholder="Enter your name" id="first" autofocus>
<span id="fn"></span><br><br>
<label>Lastname:</label>
<input type="text" name="lastname" placeholder="Enter last name" id="last">
<span id="ln"></span><br><br>
<label>Address:</label>
<input type="text" name="address" placeholder="Address" id="Add">
<span id="add"></span><br><br>
<label>Email:</label>
<input type="email" name="mail" placeholder="Email" id="Email">
<span id="mail"></span><br><br>
<label>Password:</label>
<input type="password" name="password" placeholder="Password" id="Pass">
<span id="pwd"></span><br><br>
<label>Retype Password:</label>
<input type="password" name="retype" placeholder="Retype password" id="Repass">
<span id="repass"></span><br><br>
<label>Phone:</label>
<input type="text" name="firstname" placeholder="XXXXXXXXXX" id="mobile" maxlength="10">
<span id="no"></span><br><br>
<input type="submit" name="mysubmit" value="submit">
</form>
</div>
This is the HTML code:
<form action="">
<div data-role="fieldcontain">
<label for="username">
Username
</label>
<input class="usernamevalidation validate" name="username" id="username" placeholder="" value="" type="text" maxlength="20" required>
</div>
<div data-role="fieldcontain">
<label for="password">
Password
</label>
<input class="validate" name="password" id="password" placeholder="" value="" type="password" maxlength="20" required>
</div>
<input id="submitLogin" type="submit" value="Log In" data-transition="slide">
<div id="errormsg"></div>
</form>
And this is the JavaScript code. I'm trying to hard code the page to login when the username and password is "abc".
username_test = document.getElementById("username").getAttribute("value") === "abc";
password_test = document.getElementById("password").getAttribute("value") === "abc";
if_true = window.location.href("Main_Menu.html");
if_false = document.getElementById("errormsg").innerHTML("<p style="color=red;">Invalid credentials.</p>");
function login() {
if (username_test && password_test)
{
if_true
}
else
{
if_false
}
}
Try this:
username_test = document.getElementById("username").getAttribute("value") === "abc";
password_test = document.getElementById("password").getAttribute("value") === "abc";
function login() {
if (username_test && password_test)
{
window.location.href = "Main_Menu.html";
}
else
{
document.getElementById("errormsg").innerHTML("<p style="color=red;">Invalid credentials.</p>");
}
}
OR
username_test = document.getElementById("username").getAttribute("value") === "abc";
password_test = document.getElementById("password").getAttribute("value") === "abc";
if_true = function() { window.location.href = "Main_Menu.html"; };
if_false = function () { document.getElementById("errormsg").innerHTML("<p style="color=red;">Invalid credentials.</p>"); };
function login() {
if (username_test && password_test)
{
if_true();
}
else
{
if_false();
}
}
There are two errors in your code.
First:
if_true = window.location.href("Main_Menu.html");
window.location.href is not a function. Put it inside the if statement because it is executed immediately. You can't store it in some variable. I mean you can, but it will still be executed in the very line you call it.
Second:
if_false = document.getElementById("errormsg").innerHTML("<p style="color=red;">Invalid credentials.</p>");
innerHTML is also not a function. It's a property of #errormsg element. And you can't just bind the function result to a variable and output it somwhere else expecting that it will be called there.
Your code should look like this:
username_test = document.getElementById("username").getAttribute("value") === "abc";
password_test = document.getElementById("password").getAttribute("value") === "abc";
function login() {
if (username_test && password_test)
{
window.location.href = "Main_Menu.html";
}
else
{
document.getElementById("errormsg").innerHTML = "<p style="color=red;">Invalid credentials.</p>";
}
}
I see many problem with your code here
You've made a form with empty action, and a submit button. This button will submit to empty action, thus reloading the page without doing anything.
You're reading username and password in the beginning of the page, before even writing anything down, thus it'll always result false.
The function login is not assigned to any button actions.
You can do this -
<form action="">
<div data-role="fieldcontain">
<label for="username">
Username
</label>
<input class="usernamevalidation validate" name="username" id="username" placeholder="" value="" type="text" maxlength="20" required>
</div>
<div data-role="fieldcontain">
<label for="password">
Password
</label>
<input class="validate" name="password" id="password" placeholder="" value="" type="password" maxlength="20" required>
</div>
<input id="submitLogin" onclick="login()" value="Log In" data-transition="slide">
<div id="errormsg"></div>
</form>
JS:
function login() {
username_test = document.getElementById("username").getAttribute("value") === "abc";
password_test = document.getElementById("password").getAttribute("value") === "abc";
if (username_test && password_test)
{
window.location.href = "Main_Menu.html";
}
else
{
document.getElementById("errormsg").innerHTML("<p style="color=red;">Invalid credentials.</p>");
}
}
try this:
<form action="">
<div data-role="fieldcontain">
<label for="username">
Username
</label>
<input class="usernamevalidation validate" name="username" id="username" placeholder="" value="" type="text" maxlength="20" required>
</div>
<div data-role="fieldcontain">
<label for="password">
Password
</label>
<input class="validate" name="password" id="password" placeholder="" value=""type="password" maxlength="20" required>
</div>
<input id="submitLogin" type="submit" value="Log In" data-transition="slide" onclick="nextpage()">
<div id="errormsg"></div>
</form>
This is script code:
function nextpage()
{
username_test = document.getElementById("username").value
password_test = document.getElementById("password").value
if((username_test=="abc")&&(password_test=="abc"))
window.location.href("Main_Menu.html");
else
document.getElementById("errormsg").innerHTML="Invalid credentials.";
}