OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Trying to create a success message after form submission in js

  • Thread starter Thread starter Plasmid Squid
  • Start date Start date
P

Plasmid Squid

Guest
The success message is always there. I'm not sure what I'm doing wrong. I want the message to appear after the submit button is pressed and then disappear on page refresh. I'm new to coding as you can probably tell.

Code:
const form = document.querySelector('form');
const successMessage = document.querySelector('#form');
form.addEventListener('submitt', (e) => {
    e.preventDefault();
    successMessage.classList.add('show');
    setTimeout(() => form.submit(), 2000);
} );

Code:
#success-message {
    display: none;
}
#success-message.show {
    display: block;
}
.success_text {
    text-align: center;
    font-weight: bold;
}

Code:
    <div class="form-style-6">
        <p class="success_text">
            Success!
        </p>
        <form id="form" action="main.html/form" method="POST">
            <fieldset>
            <legend>Contact Us</legend>
            <div class="asterisk_firstname">
            <label for="firstName">First Name:</label>
            <input type="text" id="firstName" name="user_firstName" required>
            </div>
            <div class="asterisk_lastname">
            <label for="latName">Last Name:</label>
            <input type="text" id="lastName" name="user_lastName" required>
            </div>
            <div class="asterisk_email">
            <label for="email">Email:</label>
            <input type="email" id="email" name="user_email" required>
            </div>
            <label for="role">Position:</label>
            <select id="role" name="user_role">
                <option value="none">-Select-</option>
                <option value="account_manager">Account Manager</option>
                <option value="project_manager">Project Manager</option>
                <option value="developer">Developer</option>
                <option value="quality analyst">Quality Analyst</option>
            </select>
            <label for="comment">Note:</label>
            <textarea id="comment" name="user_comment"></textarea>
            <button type="submit" id="submitt">Submit</button>
            </fieldset>
        </form>
    </div>

<p>The success message is always there. I'm not sure what I'm doing wrong. I want the message to appear after the submit button is pressed and then disappear on page refresh. I'm new to coding as you can probably tell.
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const form = document.querySelector('form');
const successMessage = document.querySelector('#form');
form.addEventListener('submitt', (e) => {
e.preventDefault();
successMessage.classList.add('show');
setTimeout(() => form.submit(), 2000);
} );</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#success-message {
display: none;
}
#success-message.show {
display: block;
}
.success_text {
text-align: center;
font-weight: bold;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code> <div class="form-style-6">
<p class="success_text">
Success!
</p>
<form id="form" action="main.html/form" method="POST">
<fieldset>
<legend>Contact Us</legend>
<div class="asterisk_firstname">
<label for="firstName">First Name:</label>
<input type="text" id="firstName" name="user_firstName" required>
</div>
<div class="asterisk_lastname">
<label for="latName">Last Name:</label>
<input type="text" id="lastName" name="user_lastName" required>
</div>
<div class="asterisk_email">
<label for="email">Email:</label>
<input type="email" id="email" name="user_email" required>
</div>
<label for="role">Position:</label>
<select id="role" name="user_role">
<option value="none">-Select-</option>
<option value="account_manager">Account Manager</option>
<option value="project_manager">Project Manager</option>
<option value="developer">Developer</option>
<option value="quality analyst">Quality Analyst</option>
</select>
<label for="comment">Note:</label>
<textarea id="comment" name="user_comment"></textarea>
<button type="submit" id="submitt">Submit</button>
</fieldset>
</form>
</div></code></pre>
</div>
</div>
</p>
 

Latest posts

H
Replies
0
Views
1
habrewning
H
Top