How can I trigger closing a modal containing a form after valid form submission and open a post form submission modal using JS?

Question

I’m trying to load a form modal using various buttons. I’ll be using my previous “Order Your Food” code as a simplified example and I’ve added the form and narrowed it down to just a first and last name fields and a simple mailto action for validation purposes. I've tried to simply this as much as possible so I apologize if there are any unneeded fragments of code that I may have missed and are not relevant.

If you click one of the button options, the form does load. If you fill in the two fields and hit submit, the form validates and prompts you to send an email to test@testingandrewsforms.com for the purpose of this demo so we’re not concerning ourselves with all of the post-submission client-to-server stuff.

What I’m trying to accomplish is the following:

User clicks Submit, form closes using the same CSS transition that was opened to begin with -> Post submission form opens using the CSS transitions assigned to it

I’ve added “Show Form” and “Show Post” buttons so you can see how each modal is intended to operate independently. My theory is that there’s probably a way to use my closeBtn in javascript or JQuery to close the form on validated submission and then trigger opening the post-form modal. These windows are just being powered by href links that are assigned the form and post-form modal ids and the close button is simply removing those ids and just leaving the #. So far I’ve tried combinations of jquery click events and trigger events but neither seem to be doing anything.

I don’t think I can target the CSS attribute visibility which is used to hide the modals in jquery because they’re hidden by default and as far as I can tell from the browser inspector they’re not adding the attribute as an inline style so I don’t think I can remove it like that. I think that may be because I’m using the target selector to power the transition.

Any thoughts on how I might be able to accomplish this? I’m open to any methods, pure CSS, JS, Jquery, whatever works because so far nothing I’ve tried has worked for me. I've searched SO and there are several posts on trigger events but none seem to be related to doing so with modals linked via hrefs.

let foodHeaderText = document.getElementById('foodHeaderText');
const orderBtn = document.getElementsByClassName('orderBtn');
const closeBtn = document.getElementsByClassName('closeBtn');


for (let order = 0; order < orderBtn.length; order++) {
  orderBtn[order].addEventListener('click', function(event) {
    foodHeaderText.innerHTML = event.target.attributes["value"]["value"];
  })
}

for (let close = 0; close < closeBtn.length; close++) {
  closeBtn[close].addEventListener('click', function(event) {
    foodHeaderText.innerHTML = "Food";
    contactFormInput.reset();
  })
}

//validate and display post modal
    $(document).ready(function () {
        $("#contactForm").submit(function (e) {
            $("#closeFormButton").trigger("click");
            $("#formPost").show();
        });
    });

*,
*::before,
*::after {
  box-sizing: border-box !important;
}

html {
  font-size: 100% !important;
}

.foodHeader {
  display: block;
  font-family: Univers, Helvetica Neue, Helvetica, Arial;
  font-weight: 700;
  text-align: center;
  color: black;
  font-size: 3rem;
  margin: 0 auto;
}

.btnContainer {
  display: flex;
  flex-direction: row;
}

.orderBtn {
  display: block;
  font-family: Univers, Helvetica Neue, Helvetica, Arial;
  font-weight: 700;
  text-align: center;
  color: white;
  width: 200px;
  height: 50px;
  margin: 0 auto;
  background-color: red;
  font-size: 0.8rem;
  padding: 10px 10px;
  line-height: 2rem;
  text-decoration: none !important;
  outline: 1px solid black;
}

.closeBtnContainer {
  display: block;
  margin: 20px auto;
  text-align: center;
}


.contactFormModal {
  visibility: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  height: auto;
  width: auto;
  margin: 0 auto;
  overflow: visible;
  transform: translateY(calc(-50% - 50%));
  transition: all 0.6s ease-out;
}

.contactFormModal:target {
  visibility: visible;
  z-index: 2;
  transform: translateY(calc(50% - 50%));
  transition: transform 0.6s ease-out;
}

.formWrapper {
  position: relative;
  display: block;
  background-color: #FAFAFA;
  outline: 1px solid black;
  margin: 0 auto;
  max-width: 520px;
  width: auto;
  height: auto;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6);
}

.closeBtn {
  display: inline-block;
  position: absolute;
  right: 1rem;
  top: 0.95rem;
  width: auto;
  height: auto;
  user-select: none;
  cursor: pointer;
  margin: 0 auto;
}

.fa-window-close {
  color: #646464;
  transition: color 0.2s linear;
}

.fa-window-close:hover,
.fa-window-close:focus {
  color: black;
  transition: color 0.2s linear;
}

.orderFormHeader {
  font-family: Univers, Helvetica Neue, Helvetica, Arial;
  display: block;
  font-weight: bold;
  text-align: center;
  color: black;
  font-size: clamp(2.2em, 3vw, 2.2em);
  margin: 0rem auto;
  padding: 0.7rem 0rem 0rem 0rem;
  line-height: 1.3em;
  letter-spacing: -0.02em;
}

.orderFormLineBreaker {
  margin: 0em auto 0.5em auto;
  display: block;
  border: none;
  color: white;
  height: 1px;
  background: black;
  background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 190, from(#000), to(#FAFAFA));
}

.orderFormContainer {
  width: 520px;
  height: auto;
  display: block;
  position: relative;
  margin: 0 auto;
  background-color: transparent;
}

.footerContainer {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 0.5rem auto;
}

.submitBtnNoSelect {
  user-select: none;
}

.submitBtn {
  font-family: Univers, Helvetica Neue, Helvetica, Arial;
  display: inline-block;
  font-weight: 700;
  width: 7rem;
  height: auto;
  color: white;
  background-color: #CC1818;
  padding: 0.2rem 0rem 0.1rem 0.5rem;
  margin: 0rem 1rem 0rem auto;
  text-align: left;
  text-decoration: none;
  font-size: 1.5em;
  word-spacing: normal;
  cursor: pointer;
  border: 1px solid black;
  transition: all 0.3s ease-in-out;
}

.contactFormContainer {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;

}

.orderPageRow {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 auto;
  padding: 0.5rem 1rem 0rem 1rem;
}

.orderPageRow:first-child {
  padding-top: 1rem;
}

.orderPageColumn {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
  margin: 0 auto;
  text-align: left;
}

.contactFieldNames {
  font-family: Univers, Helvetica Neue, Helvetica, Arial;
  display: inline-block;
  font-weight: 700;
  color: #646464;
  background-color: transparent;
  padding: 0rem 0rem 0rem 0rem;
  margin: 0rem auto;
  text-align: left;
  text-decoration: none;
  font-size: 1rem;
  word-spacing: normal;
}

.formInput {
  height: 100%;
  width: 246px;
  padding: 10px;
  font-family: Univers, Helvetica Neue, Helvetica, Arial;
  font-weight: 700;
  font-size: 1rem;
}

.requiredAsterisk {
  font-family: Univers, Helvetica Neue, Helvetica, Arial;
  display: inline-block;
  font-weight: 700;
  font-size: 1em;
}

.disclosureText {
  font-family: Univers, Helvetica Neue, Helvetica, Arial;
  display: inline-block;
  font-weight: 400;
  line-height: 1.2em;
  font-size: 0.7em;
  text-align: justify;
  text-justify: inter-word;
  color: #646464;
  margin: 0rem 1rem 0.85rem 1rem;
}

.commentsInput {
  display: block;
  font-family: Univers, Helvetica Neue, Helvetica, Arial;
  font-weight: 700;
  background-color: white;
  font-size: 1rem;
  resize: vertical;
  overflow: auto;
  overflow-wrap: break-word;
  min-height: 82px;
  width: 246px;
  line-height: 20px;
  padding: 10px;
  border: 1px solid #767676;
  border-radius: 2px;
}

/* begin form post modal */

.formPostContainer {
  width: 520px;
  height: auto;
  display: block;
  position: relative;
  margin: 0 auto;
  background-color: transparent;
}

.formPostModal {
  visibility: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  height: auto;
  width: auto;
  margin: 0 auto;
  overflow: visible;
  transform: translateX(calc(-50% - 50%));
  transition: all 0.6s ease-out;
}

.formPostModal:target {
  visibility: visible;
  z-index: 2;
  transform: translateX(calc(50% - 50%));
  transition: transform 0.6s ease-out;
}

.formPostWrapper {
  position: relative;
  display: block;
  background-color: #FAFAFA;
  outline: 1px solid black;
  margin: 0 auto;
  max-width: 520px;
  width: auto;
  height: auto;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6);
}

.formPostConfirmationText {
  position: relative;
  display: block;
  font-family: Oswald, Univers, Helvetica Neue, Helvetica, Arial;
  font-weight: 700;
  line-height: 1.2em;
  font-size: 1.6em;
  text-align: justify;
  text-justify: inter-word;
  color: #646464;
  margin: 0rem 1rem;
}

.homeBtnNoSelect {
  user-select: none;
}

.homeBtn {
  font-family: Univers, Helvetica Neue, Helvetica, Arial;
  display: inline-block;
  font-weight: 700;
  width: 35%;
  height: auto;
  color: white;
  background-color: #CC1818;
  padding: 0.2rem 0.5rem 0.1rem 0rem;
  margin: 0.5rem auto 0rem auto;
  text-align: center;
  text-decoration: none;
  font-size: 1.5em;
  word-spacing: normal;
  cursor: pointer;
  border: 1px solid black;
  transition: all 0.3s ease-in-out;
}


.formPostFooter {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0.5rem auto;
}

/* end form post modal */



  

  

  

  Order Your Food
  
    Order Your Cheeseburger
    Order Your Salad
    Order Your Sub
  
  
    Sign Up
  

  
    Post Form
  

  
  
    
      
      Order Your Food
      
      
      
        
          
            
              
                
                  First Name
                  *
                
              
            
            
              
            
          
          
            
              
                
                  Last Name
                  *
                
              
            
            
              
            
          
        
        
          
          
        
        Bottom text
        
      
    
  
  
    
      
      Thank You!
      
      
        We've received your request and will be in
          touch soon!
        
        
          
          
            Return Home

The form validation doesn't seem to trigger in Chrome so here's a jsfiddle that seems to work fine in Firefox (security settings I'm guessing?) https://jsfiddle.net/astombaugh/kf2vgq0p/678/

Bonus crude illustration just in case my explanation isn't sufficient:

user_8565010 · Answer

I managed to come up with a solution by using the onsubmit event in JS. Since my form's validation is powered by HTML5 I needed some way of performing both the actions I desired in my original post but do so on a valid form submission and not just by clicking the submit button.

So, I removed the :target: selectors from my CSS and changed the classes to contactFormModalVisible and formPostModalVisible, and used javascript's classList to add and remove those classes as needed. Then I built an onsubmit event that only fires on a valid form submission from the HTML structure. It seems to work but I'll have to check it once I've gotten to the part where I'm actually sending information. If there's anything about this answer that could be improved please feel free to share.

let foodHeaderText = document.getElementById('foodHeaderText');
let contactForm = document.getElementById('contactForm');
let postForm = document.getElementById('formPost')
const orderBtn = document.getElementsByClassName('orderBtn');
const closeBtn = document.getElementsByClassName('closeBtn');
const submitBtn = document.getElementsByClassName('submitBtn');


for (let order = 0; order < orderBtn.length; order++) {
  orderBtn[order].addEventListener('click', function(event) {
    foodHeaderText.innerHTML = event.target.attributes['value']['value'];
    contactForm.classList.add('contactFormModalVisible');
  })
}

for (let close = 0; close < closeBtn.length; close++) {
  closeBtn[close].addEventListener('click', function(event) {
    foodHeaderText.innerHTML = 'Food';
    contactForm.classList.remove('contactFormModalVisible');
    postForm.classList.remove('formPostModalVisible');
    contactFormInput.reset();
  })
}

for (let submit = 0; submit < submitBtn.length; submit++) {
  submitBtn[submit].addEventListener('click', function(event) {
    contactForm.onsubmit = (e) => {
      contactForm.classList.remove('contactFormModalVisible');
      postForm.classList.add('formPostModalVisible');
      e.preventDefault();
    }
  })
}

*,
*::before,
*::after {
  box-sizing: border-box !important;
}

html {
  font-size: 100% !important;
}

.foodHeader {
  display: block;
  font-family: Univers, Helvetica Neue, Helvetica, Arial;
  font-weight: 700;
  text-align: center;
  color: black;
  font-size: 3rem;
  margin: 0 auto;
}

.btnContainer {
  display: flex;
  flex-direction: row;
}

.orderBtn {
  display: block;
  font-family: Univers, Helvetica Neue, Helvetica, Arial;
  font-weight: 700;
  text-align: center;
  color: white;
  width: 200px;
  height: 50px;
  margin: 0 auto;
  background-color: red;
  font-size: 0.8rem;
  padding: 10px 10px;
  line-height: 2rem;
  text-decoration: none !important;
  outline: 1px solid black;
}

.closeBtnContainer {
  display: block;
  margin: 20px auto;
  text-align: center;
}


.contactFormModal {
  visibility: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  height: auto;
  width: auto;
  margin: 0 auto;
  overflow: visible;
  transform: translateY(calc(-50% - 50%));
  transition: all 0.6s ease-out;
}

.contactFormModalVisible {
  visibility: visible;
  z-index: 2;
  transform: translateY(calc(50% - 50%));
  transition: transform 0.6s ease-out;
}

.formWrapper {
  position: relative;
  display: block;
  background-color: #FAFAFA;
  outline: 1px solid black;
  margin: 0 auto;
  max-width: 520px;
  width: auto;
  height: auto;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6);
}

.closeBtn {
  display: inline-block;
  position: absolute;
  right: 1rem;
  top: 0.95rem;
  width: auto;
  height: auto;
  user-select: none;
  cursor: pointer;
  margin: 0 auto;
}

.fa-window-close {
  color: #646464;
  transition: color 0.2s linear;
}

.fa-window-close:hover,
.fa-window-close:focus {
  color: black;
  transition: color 0.2s linear;
}

.orderFormHeader {
  font-family: Univers, Helvetica Neue, Helvetica, Arial;
  display: block;
  font-weight: bold;
  text-align: center;
  color: black;
  font-size: clamp(2.2em, 3vw, 2.2em);
  margin: 0rem auto;
  padding: 0.7rem 0rem 0rem 0rem;
  line-height: 1.3em;
  letter-spacing: -0.02em;
}

.orderFormLineBreaker {
  margin: 0em auto 0.5em auto;
  display: block;
  border: none;
  color: white;
  height: 1px;
  background: black;
  background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 190, from(#000), to(#FAFAFA));
}

.orderFormContainer {
  width: 520px;
  height: auto;
  display: block;
  position: relative;
  margin: 0 auto;
  background-color: transparent;
}

.footerContainer {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 0.5rem auto;
}

.submitBtnNoSelect {
  user-select: none;
}

.submitBtn {
  font-family: Univers, Helvetica Neue, Helvetica, Arial;
  display: inline-block;
  font-weight: 700;
  width: 7rem;
  height: auto;
  color: white;
  background-color: #CC1818;
  padding: 0.2rem 0rem 0.1rem 0.5rem;
  margin: 0rem 1rem 0rem auto;
  text-align: left;
  text-decoration: none;
  font-size: 1.5em;
  word-spacing: normal;
  cursor: pointer;
  border: 1px solid black;
  transition: all 0.3s ease-in-out;
}

.contactFormContainer {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;

}

.orderPageRow {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 auto;
  padding: 0.5rem 1rem 0rem 1rem;
}

.orderPageRow:first-child {
  padding-top: 1rem;
}

.orderPageColumn {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
  margin: 0 auto;
  text-align: left;
}

.contactFieldNames {
  font-family: Univers, Helvetica Neue, Helvetica, Arial;
  display: inline-block;
  font-weight: 700;
  color: #646464;
  background-color: transparent;
  padding: 0rem 0rem 0rem 0rem;
  margin: 0rem auto;
  text-align: left;
  text-decoration: none;
  font-size: 1rem;
  word-spacing: normal;
}

.formInput {
  height: 100%;
  width: 246px;
  padding: 10px;
  font-family: Univers, Helvetica Neue, Helvetica, Arial;
  font-weight: 700;
  font-size: 1rem;
}

.requiredAsterisk {
  font-family: Univers, Helvetica Neue, Helvetica, Arial;
  display: inline-block;
  font-weight: 700;
  font-size: 1em;
}

.disclosureText {
  font-family: Univers, Helvetica Neue, Helvetica, Arial;
  display: inline-block;
  font-weight: 400;
  line-height: 1.2em;
  font-size: 0.7em;
  text-align: justify;
  text-justify: inter-word;
  color: #646464;
  margin: 0rem 1rem 0.85rem 1rem;
}

.commentsInput {
  display: block;
  font-family: Univers, Helvetica Neue, Helvetica, Arial;
  font-weight: 700;
  background-color: white;
  font-size: 1rem;
  resize: vertical;
  overflow: auto;
  overflow-wrap: break-word;
  min-height: 82px;
  width: 246px;
  line-height: 20px;
  padding: 10px;
  border: 1px solid #767676;
  border-radius: 2px;
}

/* begin form post modal */

.formPostContainer {
  width: 520px;
  height: auto;
  display: block;
  position: relative;
  margin: 0 auto;
  background-color: transparent;
}

.formPostModal {
  visibility: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  height: auto;
  width: auto;
  margin: 0 auto;
  overflow: visible;
  transform: translateX(calc(-50% - 50%));
  transition: all 0.6s ease-out;
}

.formPostModalVisible {
  visibility: visible;
  z-index: 2;
  transform: translateX(calc(50% - 50%));
  transition: transform 0.6s ease-out;
}

.formPostWrapper {
  position: relative;
  display: block;
  background-color: #FAFAFA;
  outline: 1px solid black;
  margin: 0 auto;
  max-width: 520px;
  width: auto;
  height: auto;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6);
}

.formPostConfirmationText {
  position: relative;
  display: block;
  font-family: Oswald, Univers, Helvetica Neue, Helvetica, Arial;
  font-weight: 700;
  line-height: 1.2em;
  font-size: 1.6em;
  text-align: justify;
  text-justify: inter-word;
  color: #646464;
  margin: 0rem 1rem;
}

.homeBtnNoSelect {
  user-select: none;
}

.homeBtn {
  font-family: Univers, Helvetica Neue, Helvetica, Arial;
  display: inline-block;
  font-weight: 700;
  width: 35%;
  height: auto;
  color: white;
  background-color: #CC1818;
  padding: 0.2rem 0.5rem 0.1rem 0rem;
  margin: 0.5rem auto 0rem auto;
  text-align: center;
  text-decoration: none;
  font-size: 1.5em;
  word-spacing: normal;
  cursor: pointer;
  border: 1px solid black;
  transition: all 0.3s ease-in-out;
}


.formPostFooter {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0.5rem auto;
}

/* end form post modal */


  

  

  

  Order Your Food
  
    Order Your Cheeseburger
    Order Your Salad
    Order Your Sub
  
  
    Sign Up
  

  
    Post Form
  

  
  
    
      
      Order Your Food
      
      
      
        
          
            
              
                
                  First Name
                  *
                
              
            
            
              
            
          
          
            
              
                
                  Last Name
                  *
                
              
            
            
              
            
          
        
        
          
          
        
        Bottom text
        
      
    
  
  
    
      
      Thank You!
      
      
        We've received your request and will be in
          touch soon!
        
        
          
            Return Home

How can I trigger closing a modal containing a form after valid form submission and open a post form submission modal using JS?

1 Answers