2010-03-12 9 views
1

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

나는 IE/Netscape 4를 지원해야 할 필요가있는 것 같아 사과드립니다. 와우. –

+2

@ 러셀 : 사과 하시겠습니까? 그래서 그것은 당신 잘못입니다! @ 모두들 : '메신저! – Pops

+0

다른 러셀이었다, 나는 맹세한다! –

답변

1

기본적으로 양식은 'action'속성에서 지정된 페이지로 변경하여 콘텐츠를 제출합니다. AJAX 또는 jQuery를 사용하여 데이터를 제출하고 결과를 처리하지 못하게하려면 추가 스크립트를 작성해야합니다.

또는 단순히 프로그래밍중인 언어를 사용하여 해당 부서의 기본 표시 여부를 설정할 수 있습니다. 양식 데이터가 있으면 기본적으로 표시하고, 그렇지 않으면 기본적으로 숨 깁니다.

+0

두 플러그인을 결합했습니다! http://malsup.com/jquery/form/ http://famspam.com/facebox – Michael

0

AJAX 호출을 사용하여 전체 페이지를 다시 게시하는 대신 양식을 게시하는 방법은 어떻습니까?

0

버튼에 "제출"유형을 사용하는 대신 "버튼"유형을 사용하고 onclick이라는 스크립트를 사용하면 ajax를 사용하여 양식을 제출하고 필요한 작업을 수행 할 수 있습니다.

이것은 양식의 의미를 약간 무시하지만 잘 작동합니다. 프로토 타입 또는 비슷한 (jquery 등)과 같은 javascript 라이브러리를 사용하여 폼의 가져 오기 또는 게시 배열을 만들어 쉽게 사용할 수있는 기능을 제공 할 수 있습니다.