尝试在js中提交表单后创建成功消息答案

【问题标题】：Trying to create a success message after form submission in js尝试在js中提交表单后创建成功消息
【发布时间】：2021-10-26 17:11:32
【问题描述】：

成功消息始终存在。我不确定我做错了什么。我希望消息在按下提交按钮后出现，然后在页面刷新时消失。正如您可能知道的那样，我是编码新手。

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

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

    <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>

【问题讨论】：

错字：submitt
为什么不会显示成功消息？我没有看到任何可以隐藏它的东西。您发布的 CSS 不会隐藏 <p class="success_text">。 #success-message { display: none;} 会，但我看不出你的例子中选择了什么。

标签： javascript html jquery forms

【解决方案1】：

更正此部分

form.addEventListener('submit',()=>{
 e.preventDefault();
    successMessage.classList.add('show');
    setTimeout(() => form.submit(), 2000);
}
)

【讨论】：

请在您的回答中提供更多详细信息。正如目前所写的那样，很难理解您的解决方案。

【解决方案2】：

 <p class="success_text">
            Success!
 </p>

你的班级名称是“success-text”，你应该使用它来代替“#success-message” 你会很高兴的。也应该使用 addEventListener("submit" cb) 而不是 "submitt"

【讨论】：

【解决方案3】：

CSS 正在尝试使用 HTML 中不存在的 id="success-message" 定位元素。

CSS 应该以具有class="success_text" 的 HTML 元素为目标，如下所示：

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

为了选择正确的元素，还需要更改 JavaScript，如下所示：

const successMessage = document.querySelector('.form-style-6 .success_text');

最后，更正 addEventListener 中的submitt 错字：

form.addEventListener('submit', (e) => {

【讨论】：

【解决方案4】：

@Plasmid Squid 这是 Web 开发中通过 javascript POST 表单数据的自然行为，您可以像这样通过 XMLHttpRequest 实现您的目标

第一步 - HTML 部分

您可以像这样设置 HTML 表单标签及其元素

<form id="form" action="#" method="POST" onsubmit="return false;">
    <input type="text" id="firstName" name="user_firstName" required>
    <button type="button" id="submit">Submit</button>
</form>

第二步 - Javascript 部分

<script type="text/javascript">
    var submitButton = document.getElementById('submit');
    submitButton.addEventListener("click", function(){
        
        var form = document.getElementById('form');
        var formData = new FormData(form);
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (xhttp.readyState == XMLHttpRequest.DONE) {

                var response = JSON.parse(xhttp.responseText)
                if( response.success == true ){

                    alert("Success Message");

                }else{

                    // Show Errors or False Message
                }
            }
        }
        xhttp.open("POST", "receive.php",true);
        xhttp.send(formData);

    });
</script>

您只需将 receive.php 替换为您的表单操作属性值

【讨论】：