Question

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

<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>

但是当我点击“查找”按钮时，该特定表格未被隐藏。

Answer 1

应该是

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

或

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

第二个选项将显示表格最初出现的一些空白区域，其中第一个选项不是

Answer 2

将CSS显示属性设置为无。

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

另外， javascript:属性不需要 onclick。

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

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

如果您的表单无处可去，Phil建议您不要提交表单。只需{strong> onsubmit 处理程序中的return false。

<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>

Answer 3

使用jQuery：

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

使用Javascript：

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

发出错误“无法设置属性'显示'未定义”

所以，解决这个问题的方法是：

<div style="display:inline-block" id="test"></div>

你的html代码如下所示：

template

Answer 4

将hidden替换为none。请参阅MDN reference。

Answer 5

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

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

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

object.style.visibility="hidden"

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

选中此illustration

Answer 6

也许你可以添加一个像隐藏＆＃39;

这样的课程

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

的document.getElementById（＆＃34;测试＆＃34）。classList.add（＆＃34; anotherclass＆＃34）;

Answer 7

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

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

hidden用于visibility

Answer 8

您需要使用display = none

隐藏的值与名为visibility

的属性相关联

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

<script type="text/javascript">
function hide(){
document.getElementById("test").style.display="none";
}
</script>

Answer 9

这应该是它尝试。

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

Answer 10

你可以使用这样的...... 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>

Answer 11

通过JavaScript

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

通过Jquery

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

document.getElementById（“test”）。style.display =“hidden”无法正常工作

11 个答案: