Question

我有一个我希望提交的表单，该表单发布到php脚本以处理表单数据。

我需要做的是在点击提交后有一个带有php结果的colorbox弹出窗口。

可以这样做吗？

这就是我一直在尝试的：

$("#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

本文将帮助您解决问题

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

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

这就是我最终让它发挥作用的方式：

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

提交表单（jquery）并在colorbox中显示结果

4 个答案: