Hi

I can't find the answer to this one in the forum so can you let me know if it's possible?

I have a really simple form on my website that fetches driving directions from Google Maps when you enter a start address. At the moment this opens in a new window using target="_blank". Can I launch this content inside a Floatbox instead?

I have tried a few methods but can't get it to work.

Thanks

Julian

Here is the form code:-

<form action="http://maps.google.co.uk/maps" method="get" target="_blank">
<input name="saddr" class="cleardefault" type="text" value="enter postcode..." />  
<input class="ca" type="submit" id="sub" value="GO &gt;" />
<input type="hidden" name="daddr" value="LL54 7YF" />  
<input type="hidden" name="hl" value="en" />
</form>

I like this problem and I'm glad you raised it so that it will be captured in the forum. It's actually quite simple to accomplish. We just need to replace the default submit action with a call to fb.start, and use Floatbox's way cool fb.serialize API function to help build the URL to use in the start command.

In your existing form, remove target="_blank" and replace that with onsubmit="return useFB(this);". Then we just need the simple submit action to startup the floatbox:

<script type="text/javascript">
function useFB(form) {
	fb.start(form.action + &#039;?&#039; + fb.serialize(form));
	return false;
}
</script>

I think that code is self-explanatory. If you want to provide option settings for the displayed floatbox, pass those as a second string parameter to the fb.start call.

For details about the two API functions used (and all the others), refer to the API reference.

Cheers...

Ok that IS really cool - I'm glad I asked now. Works a treat!

Thanks

Hi - as an extension to this very useful Floatbox feature, is it possible to have multiple forms submitting to floatbox windows on the same page?

I don't think so, but I'm not 100% sure I get your meaning. Forms don't submit to elements on the page; they submit to the host server.

If you want to provide more detail about what you want to accomplish I can see if there's a clean way to achieve it.

OK - I have a set of listings for professionals on a page. We display phone contact info etc. and in the past I have been setting email contact links for each listing which submit to another page via POST the user_id. The other page receives the user_id, does a query for the user's email address and we can allow a contact form to point messages sent by the form to the right person, without the user or any web visitor having access to user email.

What I was looking to achieve is the same action, but instead using floatbox. Hence, listing A, B and C would all have links to submit by POST data to the script, which would load into floatbox. This would give visitors greater amenity with the site as they could then close floatbox window after sending a message and browse on...

A POST (or a GET with query-string parameters) always goes to the server, which processes the submitted values and returns HTML markup in a response.

It seems to me that you want to use exactly the approach outlined above in this thread. The useFB function could send a code for the desired contact in the query-string built by the fb.serialize function. The target page could return the markup for the contact form with a hidden field predefined with a code for the desired contact. This contact form would be displayed in a floatbox (courtesy of the fb.start call). The subsequent submission of the contact form would include the hidden field and the back-end processor could use this code to direct the email.

Yes, but my question is, and sorry for taking so long to get to this, do I have to vary the form ID or name? I have attempted a single instance of this at the top of the page with all the forms and it seems to fail:

<script type="text/javascript">
function useFB(form) {
	fb.start(form.action + &#039;?&#039; + fb.serialize(form));
	return false;
}
</script>

so I am I correct in assuming each form should be uniquely named, eg. name=form_XX and also form_XX somehow indicated in the individual floatbox start call for said form?

The little 'useFB' function I provided does not use a form's name or id attribute. It is called by an onsubmit action attached to the form like this:
onsubmit="return useFB(this);"
The 'this' keyword is a reference to the form that the submit handler is attached to. This reference gets passed as the only parameter to the useFB function, which names that parameter 'form'. The useFB function simply concatenates a URI from the referenced form's 'action' attribute and its form field values. Whatever the server returns from a GET of that URI is what is shown in the floatbox started by fb.start. Note that we are passing the form values in as GET parameters, not POST parameters. If your server-side code is looking for POST parameters, it won't find any.

Got it - I won't use POST then. And all is well. Thanks!