php output display on a greybox

Question

I have a form that calls a php script on submit to insert data into a MySQL database. I would like the output of the php script return to a greybox. I haven't been able to make it work so I appreciate any help you guys can provide.

I have the greybox call on the form definition see below but is not doing the trick.

Here is a subset of the code:

<script type="text/javascript" src="greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/AJX_fx.js"></script>
<script type="text/javascript" src="greybox/gb_scripts.js"></script>

<div id="content">

<form id="contact_us" name="contact_us" action="contact-greybox.php"  method="POST" onSubmit="return GB_showCenter('Testing', this.action, 500, 500)">
<fieldset>
<label for="employee_id">Employee ID:</label>
<input id="employee_id" name="employee_id" type="number" size="10" /><P />
<label for="employee_name">Employee Name:<strong><br /> (as it should appear on
email) </strong></label>
<input id="employee_name" name="employee_name" type="text"  /><P />
</fieldlist>

<p class="submit"><input type="image" name="submit" value="Submit Form" src="icons/ambas_submit.jpg" boder="0">

</form>
</div>

The php is a simple insert statement into MySQL.

Appreciate any help

Answer 1

greybox doesn't support POST submits, but the general pattern is to use ajax to submit the form- otherwise your page will refresh.

You need to set an onclick( $.submit ) to the form input then return false at the end of your ajax call:

$('#contact_us').submit(function(){
    //get your inputs here
    var e_id = $.('#employee_id').val();
    //...etc....
    $.post( ...
        //set your data/input fields here:
        data: { id: e_id },
        success: function(response){
            //display the response: this is what you get back from: contact-greybox.php   
        }
    })
    return false;
});

fancybox is an overlay box that supports being called with pure html as a parameter, so that you can just put this in your success function:

$.fancybox(response);
...or
$.fancybox(response.html)... etc.