Отправить форму (JQuery) и показать результаты в Colorbox

Question

У меня есть форма, которую я хочу отправить и которая публикует скрипт php для работы с данными формы.

Что мне нужно сделать, это нажать всплывающее окно с окном 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;
     });

ОБНОВЛЕНИЕ: Это должно быть возвращено в iframe как Для build_action.php предусмотрены специальные css и js для этих результатов.

Answer 1

Это простой, непроверенный код, но он даст вам хорошую отправную точку, чтобы вы могли уточнить, сколько пожелаете:

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

Answer 2

Вот так я и начал работать:

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

Answer 3

Вам нужно будет узнать, как правильно использовать плагин 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();

    });
});

Answer 4

эта статья поможет вам с проблемой

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);