19

当我点击提交按钮时，我想隐藏我的表单。我的代码如下：

<script type="text/javascript">
    function hide() {
        document.getElementById("test").style.display = "hidden";
    }
</script>
<form method="post" id="test">
    <table width="60%" border="0" cellspacing="2" cellpadding="2">
        <tr style="background:url(../images/nav.png) repeat-x; color:#fff; font-weight:bold"
        align="center">
            <td>Ample Id</td>
            <td>Find</td>
        </tr>
        <tr align="center" bgcolor="#E8F8FF" style="color:#006">
            <td>
                <input type="text" name="ampid" id="ampid" value="<?php echo $_POST['ampid'];?>"
                />
            </td>
            <td>
                <input type="image" src="../images/btnFind.png" id="find" name="find"
                onclick="javascript:hide();" />
            </td>
        </tr>
    </table>
</form>

但是当我单击“查找”按钮时，该特定表单并没有被隐藏。

4

11 回答 11

50

It should be either 

document.getElementById("test").style.display = "none";

or 

document.getElementById("test").style.visibility = "hidden";

Second option will display some blank space where the form was initially present , where as the first option doesn't

于 2013-08-28T06:07:31.583 回答
12

将 CSS 显示属性设置为none。

document.getElementById("test").style.display = "none";

此外，您不需要 javascript:该onclick属性。

<input type="image" src="../images/btnFind.png" id="find" name="find" 
    onclick="hide();" />

最后，确保您没有多个具有相同 ID的元素。

如果您的表单无处可去，Phil 建议您阻止提交表单。只需return false在onsubmit处理程序中。

<form method="post" id="test" onsubmit="return false;">

如果您希望表单发布，但在后续页面加载时隐藏 div，则必须使用服务器端代码来隐藏元素：

<script type="text/javascript">
function hide() {
    document.getElementById("test").style.display = "none";
}
window.onload = function() {
    // if form was submitted, PHP will print the below, 
    //    which runs function hide() on page load
    <?= ($_POST['ampid'] != '') ? 'hide();' : '' ?>
}
</script>
于 2013-08-28T05:55:28.597 回答
10

使用 jQuery：

   $('#test').hide();

使用 Javascript：

document.getElementById("test").style.display="none";

引发错误“无法设置未定义的属性‘显示’ ”

因此，解决此问题的方法是：

document.getElementById("test").style="display:none";

您的 html 代码将如下所示：

<div style="display:inline-block" id="test"></div>
于 2015-11-09T09:11:36.230 回答
4

替换hidden为none。请参阅MDN 参考。

于 2013-08-28T05:55:24.847 回答
2

有两种方法可以做到这一点。

大多数答案都正确指出 style.display 没有称为“隐藏”的值。应该没有。

如果要使用“隐藏”，则语法应如下所示。

object.style.visibility="hidden"

两者的区别在于 visibility="hidden" 属性只会隐藏元素的内容，但会保留它在页面上的位置。而 display ="none" 将隐藏您的完整元素，而页面上的其余元素将填充由它创建的空白。

检查此插图

于 2013-08-28T06:13:33.270 回答
1

它是一个块元素，你需要使用none

document.getElementById("test").style.display="none"

hidden是用来visibility

于 2013-08-28T05:55:31.357 回答
1

也许你可以添加一个像“隐藏”这样的类。

按照此处的示例：https ://developer.mozilla.org/fr/docs/Web/API/Element/classList 。

document.getElementById("test").classList.add("anotherclass");

于 2017-04-11T15:08:10.240 回答
0

你可以使用这样的东西......div容器

<script type="text/javascript">
function hide(){
document.getElementById("test").innerHTML.style.display="none";
}
</script>
<div id="test">
<form method="post" >

<table width="60%" border="0" cellspacing="2" cellpadding="2"  >
  <tr style="background:url(../images/nav.png) repeat-x; color:#fff; font-weight:bold" align="center">
    <td>Ample Id</td>
    <td>Find</td>
  </tr>

  <tr align="center" bgcolor="#E8F8FF" style="color:#006" >
    <td><input type="text" name="ampid" id="ampid" value="<?php echo $_POST['ampid'];?>" /></td>
   <td><input type="image" src="../images/btnFind.png" id="find" name="find" onclick="javascript:hide();"/></td>
   </tr>

</table>

</form>
</div>
于 2013-08-28T05:59:40.427 回答
0

你需要使用display = none

隐藏的值与名为的属性连接visibility

所以你的代码应该是这样的

<script type="text/javascript">
function hide(){
document.getElementById("test").style.display="none";
}
</script>
于 2013-08-28T05:55:43.333 回答
0

这应该是它尝试它。

document.getElementById("test").style.display="none";
于 2013-08-28T05:56:35.487 回答
0

通过 JavaScript

document.getElementById("test").style.display="none";

通过jQuery

$('#test').hide();
于 2013-08-28T06:06:39.143 回答