提交表单(jquery)并在colorbox中显示结果 - Submit form (jquery) and show results in colorbox

我有一个表单，我希望提交这是张贴到php脚本处理表单数据。

我需要做的是在点击提交之后，有一个颜色框弹出，里面有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代码(doadd . 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>