У меня есть базовая форма html / php, с проверкой jquery. Я хочу, чтобы пользователь имел возможность щелкнуть ссылку, в которой говорится «предварительный просмотр», загрузиться 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> .....
Но я не могу использовать POST, поскольку я еще не представил форму. Как я могу отправить данные в свой fancybox, где пользователь может просмотреть его, и либо отправить форму, либо вернуться к редактированию? Спасибо за любую помощь.
Я хотел бы создать другой .php-файл (например, preview.php ), где вы можете (предварительно) отправить форму через ajax. Этот файл будет в основном POST значения POST полей формы, такие как $_POST['recipient'] и т. Д.
Кроме того, в том же файле (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" , который сообщает fancybox type содержимого.
Затем скрипт для отправки (предварительного просмотра) формы через ajax:
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 .
ПРИМЕЧАНИЯ :
.on() требует jQuery v1.7 + Вы можете использовать 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 просто использовал универсальное шоу «hidden div». Я предполагаю, что fancybox имеет свой собственный API, который отличается, поэтому просто замените …