Submit form (jquery) and show results in colorbox

Question

I have a form that I wish to submit which is posting to a php script to deal with the form data.

What I need to do is after hitting submit have a colorbox popup with the php results in it.

Can this be done?

This is what i've been trying:

$("#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: This would need to be returned in an iframe as the build_action.php has specific included css and js for those results.

Answer 1

This is simple, untested code but it'll give you a good jumping off point so you can elaborate however much you please:

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