CSS隱藏的DIV表單提交

使用CSS時，單擊鏈接時會彈出一個包含表單的隱藏DIV。用戶將輸入信息，然後提交表單。我希望隱藏的DIV保持可見，並在提交後顯示「成功消息」。然後用戶可以選擇關閉DIV。如果不重新加載頁面，導致DIV再次隱藏，我無法使其工作。有任何想法嗎？CSS隱藏的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>

來源

2010-03-12 Michael

我只能說，我很抱歉，您似乎仍然需要支持IE/Netscape 4.哇。 – 2010-03-12 21:14:01

@Russell：你道歉？所以這是你的錯！ @所有人：獲取即時消息！ – Pops 2010-03-12 21:16:06

這是另一個羅素，我發誓！ – 2010-03-12 21:22:33

默認情況下表格通過在其'action'屬性中更改爲指定頁面來提交內容。您將需要構建額外的腳本以防止這樣做，並使用AJAX或jQuery提交數據，然後處理結果。

或者您可以簡單地使用您正在編程的任何語言來設置分區的默認可見性。如果表單數據存在，默認顯示它，否則默認隱藏它。

來源

2010-03-12 21:09:25 animuson

結合這兩個插件！ http://malsup.com/jquery/form/ http://famspam.com/facebox – Michael 2010-03-13 03:39:12

如何使用AJAX調用來發布表單而不是回發整個頁面？

來源

2010-03-12 21:10:56 JohnFx

您可以使用「按鈕」類型並使用onclick調用的腳本代替使用「submit」類型的按鈕，該腳本將使用ajax提交表單並執行任何必要的操作。

這略微打破了表格的含義，但效果很好。您可能還想考慮使用類似於原型或類似的JavaScript庫（jQuery等），它可以爲您創建表單的獲取或後置數組，以便於實現。

來源

2010-03-12 21:36:19 txwikinger

CSS隱藏的DIV表單提交

回答

相關問題