Home/ Questions/Q 666005
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T23:46:17+00:00

Using CSS, when a link is clicked it brings up a hidden DIV that

  • 0

Using CSS, when a link is clicked it brings up a hidden DIV that contains a form. The user will then enter information and then submit the form. I’d like the hidden DIV to remain visible, and a ‘success message’ to be displayed after submission. Then the user will have the option of closing the DIV. I can’t get it to work without reloading the page, which causes the DIV to become hidden again. Any ideas?

<body>
       <a href="javascript:showDiv()" style="color: #fff;">Click Me</a>

        <!--POPUP-->

        <div id="hideshow" style="visibility:hidden;">
            <div id="fade"></div>
            <div class="popup_block">
                <div class="popup">
            <a href="javascript:hideDiv()">
              <img src="images/icon_close.png" class="cntrl" title="Close" />
              </a>
                    <h3>Remove Camper</h3>
                    <form method="post" onsubmit="email.php">
                    <p><input name="Name" type="text" /></p>
                    <p><input name="Submit" type="submit" value="submit" /></p>
                </form>
                <div id="status" style="display:none;">success</div>
              </div>
          </div>
        </div>

        <!--END POPUP-->

        <script language=javascript type='text/javascript'> 
        function hideDiv() { 
        if (document.getElementById) { // DOM3 = IE5, NS6 
        document.getElementById('hideshow').style.visibility = 'hidden'; 
        } 
        else { 
        if (document.layers) { // Netscape 4 
        document.hideshow.visibility = 'hidden'; 
        } 
        else { // IE 4 
        document.all.hideshow.style.visibility = 'hidden'; 
        } 
        } 
        }

        function showDiv() { 
        if (document.getElementById) { // DOM3 = IE5, NS6 
        document.getElementById('hideshow').style.visibility = 'visible'; 
        } 
        else { 
        if (document.layers) { // Netscape 4 
        document.hideshow.visibility = 'visible'; 
        } 
        else { // IE 4 
        document.all.hideshow.style.visibility = 'visible'; 
        } 
        } 
        } 
        </script>

</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Forms by default submit content by changing to the specified page in its ‘action’ attribute. You will need to build additional scripts to prevent it from doing that and submit the data using either AJAX or jQuery then process the result.

    Or you could simply use whatever language you’re programming in to set the default visibility for the division. If the form data exists, display it by default, otherwise hide it by default.

    • 0