Question

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

Answer 1

默认情况下，表单通过更改为“action”属性中的指定页面来提交内容。您需要构建其他脚本以防止它执行此操作并使用AJAX或jQuery提交数据，然后处理结果。

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

Answer 2

如何使用AJAX调用发布表单而不是回发整个页面？

Answer 3

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

这略微打败了表格的含义，但效果很好。您可能还想考虑使用像原型或类似的javascript库（jquery等），它们为您提供了创建表单的get或post数组的功能，以便更轻松。

CSS Hidden DIV表单提交

3 个答案: