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

Posted 2023-05-09

【中文标题】尝试在js中提交表单后创建成功消息

【英文标题】：Trying to create a success message after form submission in 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; 会，但我看不出你的例子中选择了什么。

【参考方案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 替换为您的表单操作属性值