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

Answer 2

Set CSS display property to none.

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

Also, you do not need javascript: for the onclick attribute.

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

Finally, make sure you do not have multiple elements with the same ID.

If your form goes nowhere, Phil suggested that you should prevent submission of the form. Simply return false in the onsubmit handler.

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

If you want the form to post, but hide the div on subsequent page load, you will have to use server-side code to hide the element:

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