I have validation functions on a form that currently use alert to display a pop up box with the message:
HTML
<label for="password" >Password:</label>
<input type="password" id="password" name="password" placeholder="password" required>
<label for="password2" >Password:</label>
<input type="password2" id="password2" name="password2" placeholder="confirm assword" required>
<div class="error" id="error"></div>
JS
function confirmPassword() {
var password = document.getElementById("password").value
var password2 = document.getElementById("password2").value
if(password != password2) {
alert('You entered two different passwords, please make sure both password fields match.');
}
}
How can I make the text that currently shows in a pop up box show in the <div class="error" id="error"></div> instead?
Change
alert('You entered two different passwords, please make sure both password fields match.');
to
document.getElementById("error").innerHTML = 'You entered two different passwords, please make sure both password fields match.';
You can change this:
alert('You entered two different passwords, please make sure both password fields match.');
to(as stated by Kevin P.):
document.getElementById("error").innerHTML = "You entered two different passwords, please make sure both password fields match.";
OR using jquery(since you tagged jquery):
$("#error").html("You entered two different passwords, please make sure both password fields match.");
also, to avoid errors please use strict inequality signs:
if(x !== y){
// some code here
}else{
// some code here
}
document.getElementById("error").innerHTML = "You entered two different passwords, please make sure both password fields match.";
You can do something like this:
function showPopup(text, title) {
$('#popup-body').empty();
popup = $('#popup');
popup.css("display", "block");
$('#backdrop-div').css("display", "block");
popupHead = $('#popup-header-text');
popupHead.html(title);
popupBody = $('#popup-body');
popupBody.html(text);
}
function show() {
showPopup($('#text').val(), $('#title').val());
}
(function() {
$('#backdrop-div').click(function() {
$('#popup').css("display", "none");
$('#backdrop-div').css("display", "none");
});
$(document).keyup(function(event) {
if ($('#popup').css("display") == "block") {
if (event.which == 27) {
$('#popup').css("display", "none");
$('#backdrop-div').css("display", "none");
}
}
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.popup-box {
position: absolute;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -250px;
background-color: #FFFFFF;
z-index: 100000000;
border: 2px solid #000000;
border-radius: 15px;
}
.popup-header {
margin-top: -19px;
border-bottom: 2px solid #000000;
background: red;
text-align: center;
font-family: Impact, Charcoal, sans-serif;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
}
.popup-body {
margin-top: 10px;
margin-bottom: 10px;
height: 40px;
background: #FFFFFF;
font-family: Impact, Charcoal, sans-serif;
text-align: center;
}
.popup-header-text {
margin-top: 40px;
}
</style>
<div id="backdrop-div" style="width: 1000%; height: 1000%; z-index: 20000; background-color: #000000; opacity: 0.3; top: 0; left: 0; position: fixed; display: none"></div>
<div id="popup" class="popup-box" style="display: none;">
<div id="popup-header" class="popup-header">
<h3 id="popup-header-text">Header</h3>
</div>
<div id="popup-body" class="popup-body">Text</div>
</div>
<div>
Text:
<textarea id="text">You entered two different passwords, please make sure both password fields match.</textarea>
<br>Title:
<input id="title" value="ERROR!!!">
<br>
<button onclick="show();">Show popup!</button>
</div>
However, instead of copying the code, you may want to change some things, like the CSS.
Related
Why is my paragraph (the warning message supposed to be shown below the input field when someone not correctly type in their email address) not showing?
Thank you.
function validateEmail(email) {
const re = /^[a-zA-Z0-9_.+-]+#[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
return re.test(String(email).toLowerCase());
}
form .error {
border-color: var(--Light-Red);
margin-bottom: 2rem;
}
form .error_text {
position: absolute;
top: 73.5rem;
font-size: .95rem;
margin-top: 0.8rem;
color: hsl(354, 100%, 66%);
font-weight: 500;
font-style: italic;
}
.error_text {
display: none;
}
<form id="form" class="form">
<input type="text" autocomplete="off" placeholder="Your Email Address" id="email" name="email" required/>
<button id="button" type="submit">Notify Me</button>
</form>
Seems like you have provided a very big value to the top property of .error_text class. That's why it's going way out of the window and you can't see it. Try changing the value to top: 0 or something smaller.
I have a search box in my html page.
On enter key press - it filter out the data list to be shown below.
One of the screen reader requirement says that it should read out that No results are found when nothing matches.
As "no result found" is a non actionable element and ideally tab focus should not go that label. So how indicate that user of "No results found"
Not able to implement it using using
aria-label
aria-live
Sample Code :
HTML :
<input tabindex="1" type="text" id="textIn" />
<div tabindex="1" id="searchContent" style="width:100px;height:50px;" aria-live="assertive">
</div>
Javascript
$("#textIn").on('keydown', function (e) {
if(e.keyCode == '13') {
shout();
}
})
function shout() {
var searchContent = $('#searchContent');
var noResults = document.createElement('div');
noResults.innerHTML = '<label class="">No Results found</label>';
searchContent.append(noResults);
}
This ARIA alert support article addresses Narrator support. It references an alert test page so you can play around with the options.
I made a CodePen from the two examples that work in Narrator. The code can be optimized a lot, but it shows how role="alert" can be used in conjunction JS and CSS to do what you need.
HTML
<h2>Method 3: display error by Changing CSS display:none to inline</h2>
<p><input type="submit" value="Method 3 alert - display" onclick="displayError()"></p>
<h2>Method 4: display error by adding text using createTextNode()</h2>
<p><input type="submit" value="Method 4 alert - display" onclick="addError()"></p>
<div id="displayerror" class="display">
<div class="alert" id="displayerror1" role="alert">alert via display none to block</div>
</div>
<div id="display2" role="alert"><span id="add1"></span></div>
CSS
.display {
position: absolute;
top: 5px;
left: 200px;
height: 30px;
width: 200px;
}
#display2 {
position: absolute;
top: 5px;
left: 400px;
height: 30px;
width: 200px;
clip: rect(0px, 0px, 0px, 0px);
border: 1px dashed red;
text-align: center;
padding: 5px;
background: #ffff00;
font-weight: bold;
}
JS
function displayError() {
var elem = document.getElementById("displayerror");
document.getElementById('displayerror1').style.display = 'block';
}
function addError() {
var elem1 = document.getElementById("add1");
elem1.setAttribute("role", "alert");
document.getElementById('display2').style.clip = 'auto';
alertText = document.createTextNode("alert via createTextnode()");
elem1.appendChild(alertText);
elem1.style.display = 'none';
elem1.style.display = 'inline';
}
(I have recreated it somewhat in the JSFiddle, keep in mind that it doesn't have any aesthetic visuals, its just basic to show and the <script> is also down below in the HTML code)
I have written this small function from bare bone, the basic behind it is that it should recreate a form (by adding classes in HTML from a function), which gives 4 correct check marks (the green ones) in the right corner, when they are all filled in, and 4 fault check marks (red marks) when they are not all filled in or none of them at all when the user hits send.
But now for example when a user fills in 3 of them but not one not, it will show an red check mark on all of them, how can I make it look like it only will show a redmark on the one that is not filled it, and even if he fills in the one that was not filled it it will not 'update' only when the user refreshes the page, how can I fix that?
Also how can I give a live update for example, when the user types in for example their name and moves on to the next text field which will be the subject then it should already show a greenmark for the name one, how can I fix that?
Thanks for all the effort and help in advance. (I know this form will never work since I need PHP for this.)
I think you are looking for this . See the below Snippet
jQuery('.notchecked').on('input', function() {
nietLeeg($(this));
});
function validateEmail(sEmail) {
var reEmail = /^(?:[\w\!\#\$\%\&\'\*\+\-\/\=\?\^\`\{\|\}\~]+\.)*[\w\!\#\$\%\&\'\*\+\-\/\=\?\^\`\{\|\}\~]+#(?:(?:(?:[a-zA-Z0-9](?:[a-zA-Z0-9\-](?!\.)){0,61}[a-zA-Z0-9]?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9\-](?!$)){0,61}[a-zA-Z0-9]?)|(?:\[(?:(?:[01]?\d{1,2}|2[0-4]\d|25[0-5])\.){3}(?:[01]?\d{1,2}|2[0-4]\d|25[0-5])\]))$/;
if (!sEmail.match(reEmail)) {
return false;
}
return true;
}
function nietLeeg(elem) {
if (elem == null) {
var elem = $('.notchecked');
}
elem.each(function() {
var $this = $(this);
if ($this.val() && $this.attr('id') != 'email') {
$this.removeClass('nochecked').addClass('checked');
} else if ($this.attr('id') == 'email' && validateEmail($this.val())) {
$this.removeClass('nochecked').addClass('checked');
} else {
$this.removeClass('checked').addClass('nochecked');
}
});
}
.contactmiddle>input[type="text"] {
background-color: black;
border: 1px solid white;
color: white;
margin-bottom: 10px;
height: 45px;
width: 100%;
border-radius: 5px;
padding-left: 5px;
}
.contactright>input[type="text"] {
background-color: black;
border: 1px solid white;
color: white;
width: 100%;
height: 103px;
margin-bottom: 10px;
border-radius: 5px;
padding-left: 5px;
}
.checked {
background-image: url("http://www.freeiconspng.com/uploads/check-mark-31.png");
background-size: 50px;
background-repeat: no-repeat;
background-position: right;
}
.nochecked {
background-image: url("http://www.falconpedia.de/images/6/63/No_check.png");
background-size: 50px;
background-repeat: no-repeat;
background-position: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<section class="contactmiddle">
<input class="notchecked" id="naam" name="contactpersoon" placeholder="Name" required="" type="text">
<input class="notchecked" id="email" name="contactpersoon" placeholder="Email" required="" type="text">
<input class="notchecked" id="subject" name="contactpersoon" placeholder="Subject" required="" type="text">
</section>
<section class="contactright">
<input class="notchecked" id="bericht" name="contactpersoon" placeholder="Message" required="" type="text">
<input class="knop" onclick="nietLeeg();" type="button" value="send">
</section>
You can add the follow Jquery/JS code :
function nietLeeg () {
var inputs = $('input');
inputs.each(function(){
var presentInput = $(this);
if(presentInput.val() == ''){
presentInput.removeClass('checked');
presentInput.addClass('nochecked');
}
else{
presentInput.addClass('checked');
presentInput.removeClass('nochecked');
}
});
};
$('input').on('blur',function(){
nietLeeg();
})
On every blue event the function will be called.
The function works in the following way :
if the input field is empty -> it will remove the checked class and add nochecked class. and vice versa for a non empty input field.
I'm pretty new with Javascript and jQuery, and can't seem to indentify the reason why my code acts like it does.
I have created two seemingly identical functions to change the background color of an input field.
Their goal is to turn the background color of the given input field to the color #00FF7F if anything is typed in the field. And if not, the field should be transparent.
Code JS:
$(document).ready(function () {
var $input1 = $("#logindata1");
var $input2 = $("#logindata2");
function onChangeInput1() {
$input1.css("background-color", "#00FF7F");
var value = $.trim($(".form-control").val());
if (value.length === 0) {
$input1.css("background-color", "transparent");
}
}
function onChangeInput2() {
$input2.css("background-color", "#00FF7F");
var value = $.trim($(".form-control").val());
if (value.length === 0) {
$input2.css("#background-color", "transparent");
}
}
$input1.on("keyup", onChangeInput1);
$input2.on("keyup", onChangeInput2);
});
css:
#loginbox {
width: 400px;
height: 200px;
margin-left: auto;
margin-right: auto;
margin-top: 25%;
}
.logindata {
margin-left: auto;
margin-right: auto;
margin-top: 20px;
height: 60px;
width: 290px;
transition: 0.25s ease;
}
.form-control {
margin-left: auto;
margin-right: auto;
height: 55px;
width: 288px;
border-style: none;
background-color: transparent;
text-align: center;
border: solid 2px #00FF7F;
transition: 0.25s ease;
font-size: 25px;
font-family: "Trebuchet MS";
}
.form-control:hover {
box-shadow: 0px 0px 30px #2E8B57;
}
::-webkit-input-placeholder {
color: #00FF7F;
}
Simple HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<!-- Stylesheet link -->
<link rel="stylesheet" type="text/css" href="assets/style.css">
<!-- jQuery link -->
<script type="text/javascript" src="assets/vendor/jquery-3.1.0.min.js"></script>
</head>
<body>
<div id="loginbox">
<div class="logindata" id="logindata1">
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="logindata" id="logindata2">
<input type="password" class="form-control" placeholder="Password">
</div>
</div>
<!-- Javascript link-->
<script type="text/javascript" src="assets/js/javascript.js"></script>
</body>
On the jsbin above, try typing in both the Username and Password field to see how they react differently.
Images of what happens. Didn't want to include all images here:
http://imgur.com/a/qgubP
I realize there probably is a way to compromise my js/jquery into 1 function that each input field calls instead of have a function for each.
If both of these fields are required, here's a much simpler solution using CSS only.
Add the attribute required to your <input> tags and then use the pseudo-class :valid.
.form-control:valid {
background-color: #00FF7F;
}
Code snippet:
#loginbox {
width: 400px;
height: 200px;
margin-left: auto;
margin-right: auto;
margin-top: 25%;
}
.logindata {
margin-left: auto;
margin-right: auto;
margin-top: 20px;
height: 60px;
width: 290px;
transition: 0.25s ease;
}
.form-control {
margin-left: auto;
margin-right: auto;
height: 55px;
width: 288px;
border-style: none;
background-color: transparent;
text-align: center;
border: solid 2px #00FF7F;
transition: 0.25s ease;
font-size: 25px;
font-family: "Trebuchet MS";
}
.form-control:hover {
box-shadow: 0px 0px 30px #2E8B57;
}
::-webkit-input-placeholder {
color: #00FF7F;
}
.form-control:valid {
background-color: #00FF7F;
}
<div id="loginbox">
<div class="logindata" id="logindata1">
<input type="text" class="form-control" placeholder="Username" required>
</div>
<div class="logindata" id="logindata2">
<input type="password" class="form-control" placeholder="Password" required>
</div>
</div>
jsFiddle : https://jsfiddle.net/7vzjz2u5/3/
jQuery
$(document).ready(function() {
$('.change-background').on('change', function() {
var $this = $(this);
var value = $.trim($this.val());
// toggleClass can be provided a bool value,
// If we provide true we add class, if false we remove class
$this.toggleClass('filled-background', value.length !== 0);
}).change();
// We also want to call a 'change' event on
// all inputs with the change-background class just incase the page has
// pre-filled in values
});
Instead of listening for the keyup event and then running a function, just create a listener on the change event, also if we just apply one class to all inputs we want the background colour to change on, we can just create one listener which will do it for any input with the class change-background.
Html
<div id="loginbox">
<div class="logindata" id="logindata1">
<input type="text" class="change-background form-control" placeholder="Username">
</div>
<div class="logindata" id="logindata2">
<input type="password" class="change-background form-control" placeholder="Password">
</div>
</div>
Css (the extra class for background color)
.filled-background {
background-color: #00FF7F;
}
Also side note
listening for keyup is back, someone may want to copy and paste their username and password and if they do this it won't trigger an keyup event if they use right click and paste.
Your code clears the background color when the length is 0. The way it checks the length is with this snippet of code:
var value = $.trim($(".form-control").val());
The selector $(".form-control") will select all elements with the CSS class of .form-control. This is a problem because there is more than one of them; in this case, it will always return the value from the first element found.
You should change the code to check for the specific control by searching by ID, like so:
var value = $.trim($("#logindata1 input").val()); //get user ID
var value = $.trim($("#logindata2 input").val()); //get password
You have some minor mistakes, but no worry. We can fix it.
First Problem
Other answers are pointing something important: you are trying to get the value selecting all elements with form-control class.
var value = $.trim($(".form-control").val());
You can do it, replacing your selector by your already declared variables $input1 and $input2. This way:
var value = $.trim($input1.val());
var value = $.trim($input2.val());
Second
Ok. First problem solved. The second problem is in your second function. You trying to set an invalid css: $input2.css("#background-color", "transparent");
When should be: $input2.css("background-color", "transparent"); (without #).
Next One
Nice. Next one. The id's you are setting logindata1 and logindata2 are on your divs. So, you are wrongly trying to get the value of the div instead the value of the input. you can fix your selector by appending input, this way:
var $input1 = $("#logindata1 input");
var $input2 = $("#logindata2 input");
Finally
So, finally, it should work:
$(document).ready(function () {
var $input1 = $("#logindata1 input");
var $input2 = $("#logindata2 input");
function onChangeInput1() {
$input1.css("background-color", "#00007F");
var value = $.trim($input1.val());
if (value.length === 0) {
$input1.css("background-color", "transparent");
}
}
function onChangeInput2() {
$input2.css("background-color", "#00007F");
var value = $.trim($input2.val());
if (value.length === 0) {
$input2.css("background-color", "transparent");
}
}
$input1.on("keyup", onChangeInput1);
$input2.on("keyup", onChangeInput2);
});
Your value check is not right. With your jQuery, you are checking the value of both inputs every time.
Try checking the single inputs that you are interested in instead.
$(document).ready(function () {
var $input1 = $("#logindata1");
var $input2 = $("#logindata2");
function onChangeInput1() {
$input1.css("background-color", "#00FF7F");
var value = $.trim($input1.val());
if (value.length === 0) {
$input1.css("background-color", "transparent");
}
}
function onChangeInput2() {
$input2.css("background-color", "#00FF7F");
var value = $.trim($input2.val());
if (value.length === 0) {
$input2.css("#background-color", "transparent");
}
}
$input1.on("keyup", onChangeInput1);
$input2.on("keyup", onChangeInput2);
});
I'm currently trying to make a page with an overlay that toggles once the form is correctly filled out then submitted. Once the first form is submitted it should take you to another. Both forms are in the html already, first overlay works but second does not.
function formValidator() {
var firstname = document.getElementById('firstname');
var lastname = document.getElementById('lastname');
var email = document.getElementById('email');
var phone = document.getElementById('phone');
// Check each input in the order that it appears in the form!
if (notEmpty(firstname, "Cannot leave First Name empty")) {
if (notEmpty(lastname, "Cannot leave Last Name empty")) {
if (notEmpty(phone, "Cannot leave Phone # empty")) {
if (notEmpty(email, "Cannot leave Email empty")) {
if (isAlphabet(firstname, "Please enter only letters for your first name")) {
if (isAlphabet(lastname, "Please enter only letters for your last name")) {
if (phoneValidator(phone, "Numbers only for phone # in the xxx-xxx-xxxx format")) {
if (emailValidator(email, "Please enter a valid email address")) {
return true;
}
}
}
}
}
}
}
}
return false;
}
function notEmpty(elem, helperMsg){
if(elem.value.length == 0){
alert(helperMsg);
elem.focus(); // set the focus to this input
return false;
}
return true;
}
function isAlphabet(elem, helperMsg){
var alphaExp = /^[a-zA-Z]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
function phoneValidator(elem, helperMsg){
var alphaExp = /^\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
function emailValidator(elem, helperMsg){
var emailExp = /^[\w\-\.\+]+\#[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
if(elem.value.match(emailExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
function formValidator2(){
var dropdown1 = document.getElementById('selection').value;
var dropdown2 = document.getElementById('selection2').value;
var dropdown3 = document.getElementById('selection3').value;
var dropdown4 = document.getElementById('selection4').value;
var dropdown5 = document.getElementById('selection5').value;
if(dropdown1 == ""){
alert("Please make a selection (Job Category)");
return false;
}
if(dropdown2 == ""){
alert("Please make a selection (Job Title)");
return false;
}
if(dropdown3 == ""){
alert("Please make a selection (Highest Education Level)");
return false;
}
if(dropdown4 == ""){
alert("Please make a selection (High School Graduation Year)");
return false;
}
if(dropdown5 == ""){
alert("Please make a selection (Further Education)");
return false;
}else{
return true;
}
}
/*I am currently unable to toggle from box1 to box2*/
function toggleOverlay(){
var overlay = document.getElementById('overlay');
var specialBox = document.getElementById('Box1');
var specialBox1 = document.getElementById('Box2');
overlay.style.opacity = .7;
if(overlay.style.display == "block"){
overlay.style.display = "none";
specialBox.style.display = "none";
specialBox1.style.display = "none";
} else if (specialBox.style.display == "block" && overlay.style.display == "block") {
overlay.style.display = "block";
specialBox1.style.display = "block";
specialBox.style.display = "none";
} else {
overlay.style.display = "block";
specialBox.style.display = "block";
}
}
body{
height: 100vmin;
margin-top: 0;
}
.header {
background-color: #F1F5FA;
}
.header p:first-child {
color: #4AC3E8;
margin: 0;
padding-top: 2%;
text-align: center;
font-size: 2.5vmin;
}
.header p:nth-child(2) {
color: #D3D3D8;
margin-top: 1%;
text-align: center;
padding-bottom: 2%;
}
.dark-blue {
color: #0080A4;
}
.text {
color: #00479B;
font-size: 3vmin;
}
.text2 {
color: #00479B;
font-size: 2vmin;
}
.input {
width: 30%;
margin-left: 3%;
height: 30px;
}
.spacing2 {
margin-left: 24%;
}
.spacing3 {
margin-left: 28%;
}
.button {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 5%;
width: 35%;
background-color: #008BBF;
color: white;
border-radius: 5px;
height: 50px;
font-weight: bold;
}
#main p {
color: #C6C8c8;
padding-left: 15%;
padding-right: 15%;
font-size: 1.5vmin;
margin-top: 5%;
}
.underline {
text-decoration: underline;
}
#skip {
background-color: #D7D7D7;
border-radius: 5px;
display: block;
margin-left: auto;
margin-right: auto;
width: 35%;
height: 30px;
color: #585858;
font-weight: bold;
margin-top: 3%;
}
form {
text-align: center;
}
form p {
font-size: 2.5vmin;
}
select {
width: 25%;
}
#paragraph {
color: #c6c8c8;
padding-left: 15%;
padding-right: 15%;
}
div#overlay {
display: none;
z-index: 2;
background: #000;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-align: center;
}
div#Box1 {
display: none;
position: fixed;
z-index: 3;
width: 70%;
height: 85%;
background: #FFF;
color: #000;
margin-left: 15%;
margin-top: 5%;
margin-bottom: 5%;
top: 0;
}
div#wrapper {
height: 1000px;
text-align: center;
margin-top: 10%;
}
div#Box2 {
display: none;
position: fixed;
z-index: 3;
width: 70%;
height: 85%;
background: #FFF;
color: #000;
margin-left: 15%;
margin-top: 5%;
margin-bottom: 5%;
top: 0;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="interview.css">
<script type="text/javascript" src="validation.js"></script>
</head>
<body>
<!-- Start Overlay -->
<div id="overlay"></div>
<!-- End Overlay -->
<!-- Start Special Centered Box -->
<div id="Box1">
<div class="header">
<p>WE FOUND <span class="dark-blue">ALL JOBS</span> NEAR 94536</p>
<p>To get started, enter your contact information to see qualified job offers in your area.</p>
</div>
<div id="main">
<form id="form" onsubmit='return formValidator()'>
<span class="text spacing">First Name:</span><span class="text spacing2">Last Name:</span><br>
<input type="text" id="firstname" class="input">
<input type="text" id="lastname" class="input"> <br>
<span class="text spacing">Phone:</span><span class="text spacing3">Email:</span><br>
<input type="text" id="phone" class="input">
<input type="text" id="email" class="input"><br>
<button type="submit" form="form" class="button" onsubmit="toggleOverlay()">SUBMIT</button>
</form>
<!--Normally terms and conditions would be a link instead of underline below-->
<p>By submitting my information, I agree to the <span class="underline">Terms and Conditions</span> and <span class="underline">Privacy Policy.</span></p>
<p>By clicking continue, I consent to be contacted regarding education opportunities at the phone number provided,
including mobile number, using an automated telephone dialing system. I may be contacted by 2 of the following:
College Achieve, College Complete, Education Bridge, US News Univ. Connection, Career Advisor, or preferred partners.
Consent is not required as a condition of using this service.</p>
<button type="submit" id='skip' onmousedown="toggleOverlay()">SKIP TO RESULTS</button>
</div>
</div>
<div id="Box2">
<div class="header">
<p>While we generate your <span class="dark-blue">ALL JOBS</span> search results, please complete your profile for a more targeted search......</p>
<p>Your ALL JOBS will display shortly.</p>
</div>
<div>
<form id="form2" onsubmit='return formValidator2()'>
<p class="text2">Job Category</p>
<select id="selection">
<option value=""></option>
<option>Govt Services</option>
<option>Food</option>
<option>Entertainment</option>
<option>Internet</option>
</select>
<p class="text2">Job Title</p>
<select id="selection2">
<option value=""></option>
<option>Mechanic</option>
<option>Web Developer</option>
<option>Server</option>
<option>Accountant</option>
</select>
<p class="text2">Highest Education Level?</p>
<select id="selection3">
<option value=""></option>
<option>High School</option>
<option>Some College</option>
<option>College</option>
<option>Masters</option>
</select>
<p class="text2">High School Graduation Year?</p>
<select id="selection4">
<option value=""></option>
<option>2000</option>
<option>1999</option>
<option>1998</option>
<option>1997</option>
<option>1996</option>
<option>1995</option>
<option>1994</option>
<option>1993</option>
</select>
<p class="text2">Are You Interested in Furthering Your Education?</p>
<select id="selection5">
<option value=""></option>
<option>Yes</option>
<option>No</option>
</select> <br>
<button type="submit" form="form2" class="button">CONTINUE</button>
</form>
<p id="paragraph">
By clicking continue, I consent to be contacted regarding education opportunities at the phone number provided,
including mobile number, using an automated telephone dialing system. I may be contacted by 2 of the following:
College Achieve, College Complete, Education Bridge, US News Univ. Connection, Career Advisor, or preferred partners.
Consent is not required as a condition of using this service.
</p>
</div>
</div>
<!-- Start Special Centered Box -->
<!-- Start Normal Page Content -->
<div id="wrapper">
<button onmousedown="toggleOverlay()">Apply Overlay</button>
</div>
<!-- End Normal Page Content -->
</body>
</html>
You have couple of places to correct.
Form submission triggers to reload the whole page (equals start
over).
After first form submission all boxes are hidden, so you can not
check their display attributes.
To correct the first issue always return false but call overlay before that:
function formValidator() {
var firstname = document.getElementById('firstname');
var lastname = document.getElementById('lastname');
var email = document.getElementById('email');
var phone = document.getElementById('phone');
// Check each input in the order that it appears in the form!
if (notEmpty(firstname, "Cannot leave First Name empty")) {
if (notEmpty(lastname, "Cannot leave Last Name empty")) {
if (notEmpty(phone, "Cannot leave Phone # empty")) {
if (notEmpty(email, "Cannot leave Email empty")) {
if (isAlphabet(firstname, "Please enter only letters for your first name")) {
if (isAlphabet(lastname, "Please enter only letters for your last name")) {
if (phoneValidator(phone, "Numbers only for phone # in the xxx-xxx-xxxx format")) {
if (emailValidator(email, "Please enter a valid email address")) {
toggleOverlay();
}
}
}
}
}
}
}
}
return false;
}
To correct second issue I have introduced the counter, on how many times the ApplyOverlay button was clicked. Based on its value, different form is displayed:
/*I am currently unable to toggle from box1 to box2*/
// This should fix it
var counter = 0;
function toggleOverlay(){
var overlay = document.getElementById('overlay');
var specialBox = document.getElementById('Box1');
var specialBox1 = document.getElementById('Box2');
overlay.style.opacity = .7;
if (counter==1) {
overlay.style.display = "none";
specialBox.style.display = "none";
specialBox1.style.display = "none";
} else if (counter==2) {
overlay.style.display = "block";
specialBox1.style.display = "block";
specialBox.style.display = "none";
} else {
overlay.style.display = "block";
specialBox.style.display = "block";
}
counter++;
}