时间戳

首页 > 解决方案 > 提交表单后使隐藏元素可见

javascript - 提交表单后使隐藏元素可见

问题描述

目前info、stat 和 foo元素是隐藏的。当我提交表单时，它不会使它们可见。如果我在里面使用这个unhide()函数<button onclick="unhide()"></button>，它可以正常工作。但它在表单中不起作用。

unhide()函数如何在提交表单后使这些元素可见？

<style>
                    #info {
                        visibility: hidden;
                    }
                    #stat {
                        visibility: hidden;
                    }
                    #foo {
                        visibility: hidden;
                    }
            </style>
            
            <script>
            
                    function unhide() {
                    var x = document.getElementById("info");
                    var y = document.getElementById("stat");
                    var z = document.getElementById("foo");
                    
                        if (x.style.visibility === "hidden" && x.style.visibility === "hidden" && x.style.visibility === "hidden") {
                            x.style.visibility = "visible";
                            y.style.visibility = "visible";
                            z.style.visibility = "visible";
                        } 
                        else{
                            x.style.visibility = "hidden";
                            y.style.visibility = "hidden";
                            z.style.visibility = "hidden";
                        }
                    }
        
             </script>
           
            
                <form method="GET" onsubmit="unhide()" action="../index.js" class="justify-center flex p-6">
                    <input class="mt-4 text-lg p-3 text-white rounded-l-md border-white border-2 bg-gray-900  outline-none" type="text" name="search" placeholder="Enter country">
                    <input class="mt-4 py-3 px-6 font-bold rounded-r-md text-lg cursor-pointer" value="search" id="submit" type="submit">
                    
                </form>

标签： javascripthtmlcssnode.js

解决方案

提交表单时，默认行为是将数据提交到action属性中指定的 url。这会触发页面重新加载。

因此，您的隐藏元素可能会变得可见，但是页面重新加载如此之快，您无法在它们再次变得不可见之前看到它们。

为防止出现这种默认行为，event请在 eventHandler 中包含一个作为参数onsubmit，并在代码的第一行中插入该行event.preventDefault()。

这将允许您提交表单数据，但不会触发页面重新加载，因此您的隐藏元素现在将可见。

你可以看看下面的片段：

function unhide(event) {
  event.preventDefault();
  var x = document.getElementById("info");
  var y = document.getElementById("stat");
  var z = document.getElementById("foo");

  if (x.style.visibility === "hidden" && y.style.visibility === "hidden" && z.style.visibility === "hidden") {
    x.style.visibility = "visible";
    y.style.visibility = "visible";
    z.style.visibility = "visible";
  } else {
    x.style.visibility = "hidden";
    y.style.visibility = "hidden";
    z.style.visibility = "hidden";
  }
}
#info {
  visibility: hidden;
}

#stat {
  visibility: hidden;
}

#foo {
  visibility: hidden;
}
<form method="GET" onsubmit="unhide(event)" action="/" class="justify-center flex p-6">
  <input class="mt-4 text-lg p-3 text-white rounded-l-md border-white border-2 bg-gray-900  outline-none" type="text" name="search" placeholder="Enter country">
  <input class="mt-4 py-3 px-6 font-bold rounded-r-md text-lg cursor-pointer" value="search" id="submit" type="submit">
</form>

<div id="info"> This is some info </div>
<div id="stat"> Stat </div>
<div id="foo"> Some random information </div>

推荐阅读