Thickbox 내에서 제출을 양식하십시오

StackOverflow https://stackoverflow.com/questions/569595

  •  05-09-2019
  •  | 
  •  

문제

DeCHOD BOX에서 연락 양식이 열려 있습니다. 사용자가 원하는 양식 데이터 제출을 클릭하면 해당 데이터를 처리하고 SucessFull MSG를 Thickbox로 다시 표시 할 수있는 PHP에 제출을 클릭합니다. PHP 페이지는 호출되지만 어떻게 양식 데이터를 얻을 수 있습니까?

도움이 되었습니까?

해결책

먼저 The Tickbox의 iframe 기능을 사용하여 The Tickbox에 양식을로드하십시오. 문서의 HTML 헤드에 넣어 jQuery 및 Thickbox를로드했는지 확인하십시오.

<script type="text/javascript" src="/javascripts/jquery.js"></script>
<script type="text/javascript" src="/javascripts/thickbox.js"></script>
<link href="/stylesheets/thickbox.css" rel="stylesheet" type="text/css" />

그런 다음 페이지에 링크를 넣습니다.

<a href="/contact_us_form.php?KeepThis=true&TB_iframe=true&height=400&width=600&modal=true" class="thickbox" title="Contact Us">Contact Us</a>

양식에는이 기본 구조가있는 마크 업이 있어야합니다.

<div id="content">
  <form id="contact_us" action="/contact_us.php" method="POST">
     ...
  </form>
</div>

이제 ajax를 통해 jQuery를 양식에 사용하십시오. 이것을 HTML 문서의 헤드에 넣으십시오.

<script type="text/javascript">
  jQuery(function($){
    $('#contact_us').submit(function(){ 
      $.post($(this).attr('action'), function(html) { 
        $('#content').html(html)
      })
      return false
    })
  })
</script>

이것이하는 일은 다음과 같습니다.

  1. 양식이 제출 될 때 호출 할 양식에 함수를 추가합니다. 제출 형식의 기본 동작이 발생하지 않도록 거짓을 반환합니다.

  2. 이 제출 기능은 귀하가 설정 한 양식의 동작을 사용하여 Ajax 게시물을 수행합니다. contact_us.php.

  3. 마지막으로, 이것은 모든 내용이 필요합니다 contact_us.php DIV의 내용을 ID 컨텐츠로 반환하고 교체합니다.

그러니 당신을 만드십시오 contact_us.php 스크립트는 실제로 이메일을 보내거나 데이터베이스 레코드를 작성 한 다음이 HTML을 반환하도록합니다.

<p>Thank you for your submission!</p>

<p><a href="#" onclick="window.parent.tb_remove(); return false">Continue</a>

분명히 이것은 최종 사용자가 원하는 메시지가 될 수 있습니다. 링크는 Thickbox 창을 사라지는 방법을 보여줍니다.

다른 팁

양식 데이터를 게시하려면 jQuery의 직렬화 기능을 사용해야합니다.

위의 예제 수정 :

$.post($(this).attr('action'), $(this).serialize(), function(html) { 
    $('#content').html(html);
});
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top