javascript - document.getElementById("test").style.display="hidden" not working

Question

I want to hide my form when I click on the submit button. My code is as follows:

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

But when I click on the "Find" button, that particular form is not being hidden.

Answer 1

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