CSS 隐藏 DIV 表单提交答案

【问题标题】：CSS Hidden DIV Form SubmitCSS 隐藏 DIV 表单提交
【发布时间】：2011-01-27 00:17:17
【问题描述】：

使用 CSS，当单击链接时，它会显示一个包含表单的隐藏 DIV。然后，用户将输入信息，然后提交表单。我希望隐藏的 DIV 保持可见，并在提交后显示“成功消息”。然后用户可以选择关闭 DIV。如果不重新加载页面，我无法让它工作，这会导致 DIV 再次隐藏。有什么想法吗？

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

【问题讨论】：

我要说的是，很抱歉您似乎仍然需要支持 IE/Netscape 4。哇。
@Russell：你道歉了吗？所以这是你的错！ @Everyone：得到我！
我发誓，这是另一个罗素！

标签： css forms html submit form-submit

【解决方案1】：

您可以使用“按钮”类型并使用 onclick 调用的脚本来代替使用“提交”类型的按钮，该脚本将使用 ajax 提交表单并执行任何必要的操作。

这稍微破坏了表单的含义，但效果很好。您可能还想考虑使用原型或类似（jquery 等）之类的 javascript 库，它为您提供创建表单的 get 或 post 数组的功能，以使其更容易。

【讨论】：

【解决方案2】：

使用 AJAX 调用来发布表单而不是回发整个页面怎么样？

【讨论】：

【解决方案3】：

默认情况下，表单通过在其 'action' 属性中更改到指定页面来提交内容。您将需要构建额外的脚本来防止它这样做并使用 AJAX 或 jQuery 提交数据，然后处理结果。

或者您可以简单地使用您正在编程的任何语言来设置该部门的默认可见性。如果表单数据存在，则默认显示，否则默认隐藏。

【讨论】：

结合了这两个插件！ malsup.com/jquery/form famspam.com/facebox