提交表单后使隐藏元素可见答案

【问题标题】：Make hidden elements visible after submitting form提交表单后使隐藏元素可见
【发布时间】：2021-08-06 01:03:03
【问题描述】：

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

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>

【问题讨论】：

我觉得你的 if 子句不是很好，(x.style.visibility === "hidden" && x.style.visibility === "hidden" && x.style.visibility == =“隐藏”），是否正确？我认为你必须写 (x.style.visibility === "hidden" && y.style.visibility === "hidden" && z.style.visibility === "hidden")
函数在表单外正常执行。功能没有问题。

标签： javascript html css node.js

【解决方案1】：

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

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

为防止出现这种默认行为，请将event 作为参数添加到onsubmit eventHandler，并在代码的第一行插入event.preventDefault() 行。

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

你可以看看下面的sn-p：

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>

【讨论】：