I am trying to get a popup to show on form submission-CodePudding

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/style_contact.css">
    <script src="js/js_contact.js"></script>
    <title>Contact Us</title>
    
    <style>
    
body {
    font-family: Arial, Helvetica, sans-serif;
}

* {
    box-sizing: border-box;
}

input[type=text], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
}

input[type=submit] {
    background-color: #04AA6D;
    color: white;
    padding: 12px 20px;
    border: none;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #45a049;
}

.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 10px;
}

.column {
    float: left;
    width: 50%;
    margin-top: 6px;
    padding: 20px;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}   

form_submitted{
    text-align: center;
    padding: 10px;
    border: 1px solid #ddd;
    width: 400px;
    border-radius: 5px;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
}

@media screen and (max-width: 600px) {
  .column, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}
</head>

<body>

<div >
  <div style="text-align:center">
    <h2>Contact Us</h2>
    <p>Please enter your name, email, and a brief description of your problem:</p>
  </div>
  <div >
    <div >
      <img src="images/support.jpg" style="width:100%">
    </div>
    <div  id="contact">
      <form id="contactUs">
        <label for="fname">First Name</label>
        <input type="text" id="fname" name="firstname" placeholder="Your name..">
        <label for="lname">Last Name</label>
        <input type="text" id="lname" name="lastname" placeholder="Your last name..">
        <label for="email">Email</label>
        <input type="text" id="email" name="email" placeholder="Your Email address.."> 
        <label for="subject">Subject</label>
        <textarea id="subject" name="subject" placeholder="Describe the issue.." style="height:170px"></textarea>
        <input type="submit" name="submit" value="Submit" id="nextStep">
      </form>
    </div>
  </div>
</div>

    <div id="form_submitted" style="display: none;">
      <h2>Your form has been submitted.</h2>
      <button type="submit" onclick="Close();">Close</button>
    </div>
    
    <script>
    
var nextStep = document.querySelector('#nextStep');

nextStep.addEventListener('click', function (e) {
    e.preventDefault();
    document.getElementById('contact').style.display = 'none';
    document.getElementById('form_submitted').style.display = 'block';
    setTimeout(Close, 5000);
});

function Close(){
    document.getElementById('contact').style.display = 'block';
    document.getElementById('form_submitted').style.display = 'none';
}

    </script>
</body>
</html>

I cannot figure out why the popup is not functioning. I have tried renaming the function and my div, but nothing seems to be working. I am new to javascript so I do not have the best idea of how to make functions work, but this looks correct to me. If anyone could teah me what I am doing wrong that would be greatly appreciated.

CodePudding user response：

Code Typos

There are two typos in the code that cause it not work as expected.

There is a missing </style> tag in the head section.
And there is a typo in the css: form_submitted { should be #form_submitted { because it is an ID selector. Once fixed, the popup appears at the top of the page.

Also, the form element is missing attributes needed to actually submit the form. And extra code is needed in the Close() function to submit the form after the popup closes (unless you plan to use ajax):

function Close() {
   document.getElementById('contactUs').submit();
   ...

Snippet

Run the snippet and click submit to see the popup.

var nextStep = document.querySelector('#nextStep');

nextStep.addEventListener('click', function(e) {
  e.preventDefault();
  document.getElementById('contact').style.display = 'none';
  document.getElementById('form_submitted').style.display = 'block';
  setTimeout(Close, 5000);
});

function Close() {
  document.getElementById('contact').style.display = 'block';
  document.getElementById('form_submitted').style.display = 'none';
  
  // document.getElementById('contactUs').submit();
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

input[type=text],
select,
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 10px;
}

.column {
  float: left;
  width: 50%;
  margin-top: 6px;
  padding: 20px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

#form_submitted {
  text-align: center;
  padding: 10px;
  border: 1px solid #ddd;
  width: 400px;
  border-radius: 5px;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
}

@media screen and (max-width: 600px) {
  .column,
  input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}

<div >
  <div style="text-align:center">
    <h2>Contact Us</h2>
    <p>Please enter your name, email, and a brief description of your problem:</p>
  </div>
  <div >
    <div >
      <!-- img src="images/support.jpg" style="width:100%" -->
    </div>
    <div  id="contact">
      <form id="contactUs">
        <label for="fname">First Name</label>
        <input type="text" id="fname" name="firstname" placeholder="Your name..">
        <label for="lname">Last Name</label>
        <input type="text" id="lname" name="lastname" placeholder="Your last name..">
        <label for="email">Email</label>
        <input type="text" id="email" name="email" placeholder="Your Email address..">
        <label for="subject">Subject</label>
        <textarea id="subject" name="subject" placeholder="Describe the issue.." style="height:170px"></textarea>
        <input type="submit" name="submit" value="Submit" id="nextStep">
      </form>
    </div>
  </div>
</div>

<div id="form_submitted" style="display: none;">
  <h2>Your form has been submitted.</h2>
  <button type="submit" onclick="Close();">Close</button>
</div>

CodePudding user response：

you must close style tag in head of document.