使用JavaScript而不是jquery进行多次切换

Question

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 <a href=""></a> 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> 

Answer 1

You have couple of places to correct.

1. Form submission triggers to reload the whole page (equals start over).
2. 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++;
}