handling a forms action to open it using facebox

[lit108]

I am using facebox to display a contact form, however when the user selects submit I would like the action which for this example I shall call action="contact_send.php" to also open in a facebox. Currently it is easy to open a link into a facebox by declaring the rel attribute as facebox
e.g.

<a href="contact.html" rel="facebox">Contact</a>

This opens contact.html in a facebox window, I would however like the action of this form to also open in a lightbox, does anyone have any suggestions that might help?

thanks in advance

[Airshow]

Lit108,

Off the top of my head, I expect you can dynamically create an invisible link, which emulates a facebox link, then emulate that link being clicked, all in one line of jQuery. This line needs to be wrapped in a couple more lines to cause it to fire when your form's submit button is clicked.

At the top of your page you should have :

jQuery(document).ready(function($) {
  ...
  $('a[rel*=facebox]').facebox();
  ...
})

"..." indicates other possible lines of code.

Try modifying the code to look like this

jQuery(document).ready(function($) {
  ...
  $('a[rel*=facebox]').facebox();
  $("#myForm").submit(function() {
    var href = $(this).attr('action');
    alert(href); //should give "contact_send.php"
    $("a").attr({ href:href, rel:'facebox' }).facebox().click();//dynamically create a "facebox" link then click it.
    return false;//suppress normal form submit action.
  });
  ...
})

, where your form has id="myForm" (you can change this to something more appropriate).

The alert is there for debugging and can be deleted when you've got it working.

If you need to do something with the form data, then it gets a bit more complicated.

If you don't need to do anything with the form data, then there's no point having the facebox action associated with a form.

I've not been able to test the code, so it may work, may not.

Airshow

[Airshow]

OK, I have tested now and this version should work:

$(document).ready(function($) {
  $('a[rel*=facebox]').facebox();
  $("#myForm").submit(function() {
    var href = $(this).attr('action');
    $("<a>").attr('href',href).facebox().click();
    return false;
  });
});

Airshow

[lit108]

thankyou very much, where abouts does this code sit, on the page with the form or within the action page of the form?

[Airshow]

You should already have a $(document).ready(....) structure containing $('a[rel*=facebox]').facebox(); in your document head. If not, then it must be in an external .js file.

Just add to it with my extra code.

Airshow

[lit108]

at the minute I have the code you wrote in the head section of the page with the form on, and the

$('a[rel*=facebox]').facebox();

line in the head section of the action page?

[Airshow]

You will have to experiment with my code in the head of each of the two files. I'm not too sure how facebox works in this regard.

Airshow

[Airshow]

Alternatively, make things simpler by working with one page with the form in a hidden div.

This should work because, as it stands, contact.html must contain a fixed, predefined form, therefore no penalty having it hard-coded on the main page.

The facebox documentation shows how to work with a hidden div on the same page in one of the examples.

Airshow