Submitting form with Jquery Fancybox and then appending value into parents text field

I have a jQuery auto-complete field that selects clients email adddress's. Next to that is a button that allows the user to create a new client. To avoid the clients being taken away from their already half filled form I am opening the form within a lightbox. Enter jQuery Fancybox.

The new client add form is located within a jQuery FancyBox (so it is actually an external page in an iframe).

Once the user submits the form they are redirected to a page page with parent.$.fancybox.close(); script which then closes the fancybox

I doubt this is a great way to close the lightbox. Ideally I would like the action to be 开发者_C百科fired from the submit button but then I have to take into consideration what happens if the form fails server end validation... Anyway, Moving onto my main problem.

Assuming the user was added successfully, I now would like their name and email address to be automatically inserted into the original auto-complete field back on the parent page.

This would involve some sort of interaction between frames, something I have no idea about and something Google hasn't been able to help me with either.

Is this possible? If this is could you please give me an example or point me in the right direction.

Here is some code to give you a rough idea of the parent page that calls the fancybox lightbox and ultimately needs the email and name of the newly created user passed back to it.

<tr id="client-add">
 <td>Billing Client:</td>
 <td><input type="hidden" value="" name="client_id" /><input type="text" id="addClient" name="client_name" value="" style="width: 200px;" /><red>*</red> <a class="iframe" href="/clients/add_lightbox"><img src="/images/16x16/user_add.png" border="0"/> Create New Client</a>
 </td>

Thankyou.

Tim

I'd use fancybox with inline mode instead of iframe. So basically you should put your 'create client' form in a hidden div, in the same page where you have the rest of your client selector GUI. Once you take that approach, you can easily interact with the main page's DOM from your fancybox form, as they are essentially part of the same DOM structure. Also, you can bind an autocomplete refresh action to the fancybox's onClosed event.

Modifying your original code, something like this should do the trick (untested):

<tr id="client-add">
 <td>Billing Client:</td>
 <td>
     <input type="hidden" value="" name="client_id" />
     <input type="text" id="add_client" name="client_name" value="" style="width: 200px;" /><red>*</red>
     <a id="add_client" href="#create_client_div"><img src="/images/16x16/user_add.png" border="0"/> Create New Client</a>
 </td>
</tr>

... and then somewhere in your page:

<div id="create_client_div" style="display: none;">
  <form name="new_client" ...>
  </form>
</div>

And you just bind your fancybox the usual way, as you would with an iframe-type box:

$("a#add_client").fancybox({ ... });

This way you can freely interact between the create client form and the rest of your page.