Databases
StackOverflow2013
Postsdbo
POCSS Hidden DIV Form Submit
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS Hidden DIV Form Submit
    text
    copied!<p>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?</p> <pre><code>&lt;body&gt; &lt;a href="javascript:showDiv()" style="color: #fff;"&gt;Click Me&lt;/a&gt; &lt;!--POPUP--&gt; &lt;div id="hideshow" style="visibility:hidden;"&gt; &lt;div id="fade"&gt;&lt;/div&gt; &lt;div class="popup_block"&gt; &lt;div class="popup"&gt; &lt;a href="javascript:hideDiv()"&gt; &lt;img src="images/icon_close.png" class="cntrl" title="Close" /&gt; &lt;/a&gt; &lt;h3&gt;Remove Camper&lt;/h3&gt; &lt;form method="post" onsubmit="email.php"&gt; &lt;p&gt;&lt;input name="Name" type="text" /&gt;&lt;/p&gt; &lt;p&gt;&lt;input name="Submit" type="submit" value="submit" /&gt;&lt;/p&gt; &lt;/form&gt; &lt;div id="status" style="display:none;"&gt;success&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!--END POPUP--&gt; &lt;script language=javascript type='text/javascript'&gt; 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'; } } } &lt;/script&gt; &lt;/body&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload