Javascript document.getElementById（"；test"；）.style.display="；“隐藏的”；不起作用

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

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

函数hide（）{
document.getElementById（“测试”）.style.display=“隐藏”；
}
充足Id
发现
将
隐藏的
替换为
无
。请参阅。
将CSS显示属性设置为none

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

另外，对于
onclick
属性，您不需要
javascript:

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

如果希望表单发布，但在后续页面加载时隐藏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>


函数hide（）{
document.getElementById（“测试”）.style.display=“无”；
}
window.onload=函数（）{
//如果表单已提交，PHP将打印以下内容，
//在页面加载时运行函数hide（）
}
它是一个块元素，您需要使用
none

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

hidden
用于
可见性
您需要使用
display=none

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

隐藏值与名为
可见性的属性集连接

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

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


函数hide（）{
document.getElementById（“测试”）.style.display=“无”；
}
应该就是这样，试试看

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

您可以使用如下内容……
div
container

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


函数hide（）{
document.getElementById（“test”）.innerHTML.style.display=“无”；
}
充足Id
发现
通过JavaScript

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

通过Jquery

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

应该是

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

或

第二个选项将在表单最初出现的地方显示一些空白，而第一个选项不显示，有两种方法

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

如果您想使用“hidden”，语法应该如下所示

object.style.visibility="hidden"

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

使用jQuery检查此项：

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

使用Javascript：

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

引发错误“无法设置未定义的属性“display””

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

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

您的html代码如下所示：

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

也许您可以添加一个类似“hide”的类

请遵循以下示例：

document.getElementById（“测试”）.classList.add（“另一个类”）

因为
显示
没有属性
隐藏
。尝试
none
。提示：继续阅读。解决“none”问题后，表单将在下一页加载时提交，表单将再次显示…请注意回答中的古怪引号字符（即
“
），因为人们将从此处复制和粘贴：）可能希望阻止默认操作（表单提交）但是，当页面导航到同一页面时，您将看不到脚本的结果。事实上，我要说的是，这正是OP所看到的，并且假设表单没有被隐藏。如果我使用onsubmit=“return false；”则可以工作但是我希望结果也能显示..如果我使用onsubmit=“rturn false”@namratha将警报放入函数中，我无法显示结果。我打赌它不会被调用。如果你使用onclick事件，你不需要编写javascript:hide（）simple hide（）；当我点击“查找”按钮时，是否使用了警报和检查功能，但该表单部分并没有隐藏
<div style="display:inline-block" id="test"></div>