fancybox에서 PHP/jquery 양식 미리보기 후 양식 제출 또는 양식

Question

jquery 유효성 검사와 함께 기본 html/php 양식이 있습니다. 사용자가 "미리보기"라는 링크를 클릭하고 fancybox를로드 한 다음 요소 조합을 의미하는 데이터의 미리보기를 제공하겠습니다. 예를 들어, 사용자는 iframe의 배경을 선택할 수 있습니다. 여기에 내 양식의 기본이다 -

<form action="loggedin.php" enctype="multipart/form-data" id="message_form" method="post"> 
    <h4>Who would you like to send a message to?</h4> 
    <input type="text" size="35" id="recipient" name="recipient" value="Enter Name"> 
    <h4>Choose A Background: </h4> 
    <input type="radio" value="plain" class="stationery_radio" name="stationery_radio" checked /> 
    <label for="plain">Plain</label> 
    ..... 

을 그리고 이것은 내 fancybox에서 원하는 정보입니다 :

<a class="fancybox" href="#preview_message">Click Here To Preview Your Form</a> 
    <div id="preview_message" style="display:none;"> 
    <h2>To: <?php echo ($message_form['recipient']) ?></h2> 
    ..... 

하지만 난 정말 제출하지 않은 나는이 게시물을 사용할 수 없습니다 아직 양식. 어떻게하면 사용자가 볼 수있는 fancybox로 데이터를 보내고 양식을 제출하거나 돌아가서 편집 할 수 있습니까? 어떤 도움을 주셔서 감사합니다.

Answer 1

내가 할 수있는 것은 ajax를 통해 양식을 제출할 수있는 다른 .php 파일 (예 : preview.php)을 만드는 것입니다. 이 파일은 등 $_POST['recipient'] 같은 양식 필드,

의 기본적 echoPOST 값은 또한, 같은 파일 (preview.php) 내에는 실제 형태 또는 가까운 fancybox를 제출하거나 일부 링크가있을 수있다. 여기

가 preview.php 파일의 예입니다

<?php 
function check_input($data){ 
    // sanitize your inputs here 
} 
$field_01 = check_input($_POST['field_01']); 
$field_02 = check_input($_POST['field_02']); 
$field_03 = check_input($_POST['field_03']); 
// ... etc 
?> 
<div style="width: 340px;"> 
    <h3>This is the preview of the form</h3><br /> 
    <p>Field 01 : <?php echo $field_01;?></p> 
    <p>Field 02 : <?php echo $field_02;?></p> 
    <p>Field 03 : <?php echo $field_03;?></p> 
    <a class="submit" href="javascript:;">submit</a> 
    <a class="closeFB" href="javascript:;">back to edit</a> 
</div> 

style="width: 340px;" 그렇게 fancybox 표시 상자 어떤 크기를 알 수 통지서는 주에 그런

(height는 auto 일 것) 페이지에서 미리보기를 추가하십시오. 버튼

<a class="preview" data-fancybox-type="ajax" href="preview.php">Preview</a> 

통지data-fancybox-type="ajax" 속성은 팬시 박스에 내용이 type임을 알려줍니다.

그런 다음 스크립트는 아약스를 통해 (미리보기) 양식을 제출 : 물론

jQuery(document).ready(function ($) { 
    $('.preview').on("click", function (e) { 
    e.preventDefault(); 
    $.ajax({ 
     type: "POST", 
     cache: false, 
     url: this.href, // our preview file (preview.php) 
     data: $("#message_form").serializeArray(), // all the fields in your form (use the form's ID) 
     success: function (data) { 
     // show in fancybox the returned data 
     $.fancybox(data,{ 
      modal : true, // optional (no close button, etc. see docs.) 
      afterShow: function(){ 
      // bind click to "submit" and "close" buttons inside preview.php 
      $(".submit, .closeFB").on("click", function(event){ 
       if($(event.target).is(".submit")){ 
       $("#message_form").submit(); // submit the actual form 
       } 
       $.fancybox.close(); //close fancybox in any case 
      }); // on click 
      } // afterShow 
     }); // fancybox 
     } // success 
    }); // ajax 
    }); // on click 
}); // ready 

, http://www.picssel.com/playground/jquery/postPreview_05Jun13.html에서 DEMO.

NOTES는 :

• 이
• .on()
jQuery를들 v1 + 필요 fancybox v2.1.4에 대한 것이다.7+

Answer 2

당신은 값을 얻기 위해, jQuery를 사용하고 멋진 상자에 넣어 수 있습니다 ...

이 같은 작은 ... 확실히,하지만 당신이 얻을 생각 ...

$('#preview_button').click(function(){ 

var msg = $('#recipient').val(); 
var bg = $('input:radio[name=stationary_radio]:checked').val(); 

$('h2#recipient').html(msg); 
//and whatever you wanna do with the value of the bg 
//probably apply some CSS on the fly to change the preview background? 
$('#fancybox').show(); 

});

fancybox show()는 틀리며 fancybox를 사용하지 않으므로 잘 모릅니다. 그러나 Im은 '숨겨진 div'쇼를 사용합니다. 나는 fancybox가 다른 자체 API를 가지고 있다고 가정합니다.