У меня есть форма, которую я хочу отправить, которая отправляет на php-скрипт для обработки данных формы.
То, что мне нужно сделать, – после того, как вы нажмете submit, появится всплывающее окно colorbox с результатами php.
Это можно сделать?
Это то, что я пытался:
$("#buildForm").click(function () { // #buildForm is button ID var data = $('#test-buildForm'); // #test-buildForm is form ID $("#buildForm").colorbox({ href:"build_action.php", iframe:true, innerWidth:640, innerHeight:360, data: data }); return false; }); UPDATE: это нужно будет возвращать в iframe, так как build_action.php имеет конкретные значения css и js для этих результатов.
Это простой, непроверенный код, но он даст вам хороший прыжок с места, чтобы вы могли подробно рассказать о себе:
<form action="/path/to/script.php" id="formID" method="post"> <!-- form stuff goes here --> <input type="submit" name="do" value="Submit" /> </form> <script type="text/javascript"> $(function() { $("#formID").submit(function() { $.post($(this).attr("action"), $(this).serialize(), function(data) { $.colorbox({html:data}); }, 'html'); return false; }); }); </script>
эта статья поможет вам с проблемой
http://www.php4every1.com/tutorials/jquery-ajax-tutorial/
$(document).ready(function(){ $('#submit').click(function() { $('#waiting').show(500); $('#demoForm').hide(0); $('#message').hide(0); $.ajax({ type : 'POST', url : 'post.php', dataType : 'json', data: { email : $('#email').val() }, success : function(data){ $('#waiting').hide(500); $('#message').removeClass().addClass((data.error === true) ? 'error' : 'success') .text(data.msg).show(500); if (data.error === true) $('#demoForm').show(500); }, error : function(XMLHttpRequest, textStatus, errorThrown) { $('#waiting').hide(500); $('#message').removeClass().addClass('error') .text('There was an error.').show(500); $('#demoForm').show(500); } }); return false; }); }); < ?php sleep(3); if (empty($_POST['email'])) { $return['error'] = true; $return['msg'] = 'You did not enter you email.'; } else { $return['error'] = false; $return['msg'] = 'You\'ve entered: ' . $_POST['email'] . '.'; } echo json_encode($return);
Вам нужно будет увидеть точный способ использования плагина colorbox jQuery. Но вот основной (непроверенный) пример кода, который я только что написал, чтобы надеяться, что вы по пути.
Если вы хотите отправить форму с помощью jQuery, предположив, что у вас есть следующая форма и div для хранения данных диалога:
<form id="myForm"> <input type="text" name="num1" /> <input type="text" name="num2" /> <input type="submit" name="formSubmit" /> </form> <div style="display: hidden" id="dialogData"></div>
У вас может быть PHP-код (doAddition.php), который может содержать добавление двух чисел
<?php // Do the addition $addition = $_POST['num1'] + $_POST['num2']; $result = array("result" => $addition); // Output as json echo json_encode($result); ?>
Вы можете использовать jQuery для обнаружения отправки кода, затем отправить данные на страницу PHP и вернуть результат в JSON:
$('form#myForm').submit( function() { // Form has been submitted, send data from form and get result // Get data from form var formData = $('form#myForm').serialize(); $.getJSON( 'doAddition.php', formData, function(resultJSON) { // Put the result inside the dialog case $("#dialogData").html(resultJSON.result); // Show the dialog $("#dialogData").dialog(); }); });
Вот как я закончил работу:
<div id="formwrapper"> <form method="post" action="http://wherever" target="response"> # form stuff </form> <iframe id="response" name="response" style="display: none;"></iframe> </div> <script> function hideresponseiframe() { $('#formwrapper #response').hide(); } $('form').submit( function (event) { $('#formwrapper #response').show(); $.colorbox( { inline: true, href: "#response", open: true, onComplete: function() { hideresponseiframe() }, onClosed: function() { hideresponseiframe() } } ); return true; } ); </script>