document.getElementById("test").style.display ="hidden"无法正常工作

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 display属性设置为none.

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

此外,您不需要 javascript:该onclick属性.

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

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

如果你的表格无处可去,菲尔建议你不要提交表格.只需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>

Answer 3

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

Answer 4

hidden用。。。来代替none。请参阅MDN 参考。