使用 JAVASCRIPT 提交表单后显示 DIV答案

【问题标题】：Showing DIV after Form is Submit using JAVASCRIPT使用 JAVASCRIPT 提交表单后显示 DIV
【发布时间】：2021-01-20 16:43:40
【问题描述】：

我最近在学习 javascript。现在我试图在提交表单以及验证输入字段后显示一个 div。表示如果输入为空，则不会显示 div，如果表单与字段一起提交，则会显示 div。我已经设法在提交按钮上显示和隐藏 div，但表单没有检查输入的验证，它与空 div 一起提交。下面是代码

HTML

<form method="post" action="#" id="form" class="form" >
                
                <div class="agent-details" id="agy">
                 <ul class="agent-information list-unstyled">
                  <li class="agent-link">
                   <a href="#">View Listings</a>
                 </li>
                </ul>
             </div>
                <div class="form-group">
                      <input class="form-control" id="name" name="name" value="" type="text" placeholder="Name">
              </div><!-- form-group -->
                <button type="button" onclick="mySub();"> Send Message </button>
</form>

JAVASCRIPT 代码

function mySub()
{

const user = document.getElementById('name').value;
const username = user.value;

if (username === "")
{
   document.getElementById('agy').style.display = 'none';
}
else 
{
    document.getElementById('agy').style.display = 'block';
}

}

【问题讨论】：

你试过使用 document.getElementById("agy").visibility = "hidden" 吗？
如果您正在提交一个表单（没有 ajax），您已经准备好加载一个新页面。你确定 JavaScript 是你应该在这里使用的吗？这可能更适合用您用来生成 html 的任何语言来完成。
其实有一个细微的差别，如果你使用那么它不会加载一个新页面，但是将按照您的描述进行。
@deadron 表单确实在使用 ajax 而不是重定向到不同的 URL。我希望当有人提交表单时 div 应该是可见的。但是当我尝试单击提交按钮时，它不会验证和值字段
看我的回答。

标签： javascript html forms validation if-statement

【解决方案1】：

我看到您的问题是您从“名称”输入中访问值的方式。

const user = document.getElementById('name').value;
const username = user.value;

问题出在 const username = user.value;

您已经在“user”变量中获得了用户名值，但不知何故，您在这里做了两次，使用以下语句：user.value，您不需要这样做。因为你试图访问你得到 undefined 的字符串的 'value' 属性，这不是你想要的。

只需将其替换为：

const username = document.getElementById('name').value;

并删除：

 const username = user.value;

我还创建了小提琴，所以你可以试试：https://jsfiddle.net/yc14qto5/

【讨论】：

这是隐藏div，但不是验证输入值，意味着即使用户字段输入值为空白，它也会隐藏并显示div。我试图避免这种情况，并且只想在用户填写整个表单然后提交时才显示 div
不，这不是看我提供给你的小提琴，如果你输入一些东西，它就会显示 div，如果你没有在输入中提供任何东西，它就会隐藏 div。这不是你想要的吗？当您单击提交按钮时，它确实在验证用户名字段。
感谢您的提琴，我刚刚将 CSS 添加到 div 并最初将其设置为不显示，然后它就像一个魅力。感谢您的帮助。
很高兴我能帮上忙 :)