For the front end, not the CMS, I am trying to display a form in a javascript (greybox) popup but I am having no luck.

I have a button on my main page labeled 'Signup'. I was hoping to get this button to launch a javascript popup in which the user fills out a form with their details and submits it. On submission the popup would then display a thank you message.

I have tried a number of approaches including echoing javascript from the 'doSubmit()' function but am obviously missing something.

What would be the best way to go about this? I would really appreciate any help at all.

Thanks!

Hmmm...
This is not the easiest thing to do.

For displaying the form, you should try to make the framework think the form is in a seperate page (at least you need a formtemplate which you call with renderWith). I managed doing that once, but documented my code so badly that I can't help you with some howto-steps.

Your second question was: how do I display a 'thank you'-message in the js-popup after submitting?
Unfortunately I can't help you on that one. I've been trying it too, but after a while I settled being content with just a blank form being rendered (which is all in all a lot less confusing than the form still having the entered data). If you do find a solution (or someone else has one) I'll be happy to hear.

Hey thanks for the reply TA.
I've actually already solved those two problems so am happy to help you out.

The form renders on a child of the launching form. All the CMS config of the child is on the parent but is accessed through $this->getParent().

In terms of the thank-you response I use the method from the form tutorial. I re-use the same page_controller object in the form action with renderWith() to re-render the form from the template. The Template has conditional code based on a variable that is set once the form has been submitted.

So, pseudo code for a form on a page called FormPage would be:

class FormPage_Controller extends Page_Controller {
public $form_submitted = false;

function FormSubmitted() {
return $form_submitted;
}

...

// Form Action
doFormSubmit($data, $form) {
// process form
...
$form_submitted = true;
return $this->renderWith(array('FormPage', 'Page'));
}

In Layout/FormPage.ss there would be:

<% if FormSubmitted %>

<h2>Thanks for submitting</h2>

<% else %>

$FormPageForm

<% end_if %>

Hope this helps. Now if only I can find out how to render that 'FormPage' into a javascript popup!

Hi Zalzadore,

Thanks, your situation is a bit different than mine - I also have to deal with some dataobjects, but I'll have a look at it as soon as time fits ;)

Regarding to the JS-popup: I'd use one of the popup modules that are in the unsupported extensions list. If you'd use the PrettyPhoto-extension: update it to the latest version of Pretty Photo (http://www.no-margin-for-errors.com/projects/prettyPhoto-jquery-lightbox-clone/): the version used in the module is 2.2.0 or something (and doesn't support iframes), the latest version of PP however is 2.5 (and does support them). If I'm right, this updating is as easy as replacing everything in the PP-folder in the module.

Using these popups should now be as easy as adding rel="prettyPhoto[iframes]" to the link.

BTW: I'm planning on using this functionality in a future project, but haven't done so yet.

Hey cool, I'll check it out.

I also found this post (http://www.silverstripe.org/archive/show/49254#post49254). It seems PageCommentInterface in the CMS is a relatively 'simple' version of what I'm trying to do. I've had a look at it and it seems that key to the AJAX functionality is the use of a _t() function when creating fields and actions for the form.

i.e.
$fields->push(new TextField("Name", _t('PageCommentInterface.YOURNAME', 'Your name')));
and
new FormAction("postcomment", _t('PageCommentInterface.POST', 'Post'))

Any idea what the _t() function does?

A.

Hi, I had a quick glance at it: it's worth a try.

_t() btw has nothing to do with it. It refers to the files in the lang(uage)-folder.
Fx: new TextField("Name", _t('PageCommentInterface.YOURNAME', 'Your name')) by default labels the textfield as "Your name", but if you set your interface-language to let's say Dutch (and there is a NL_nl.php language file), it will look for a translation in that file and all of a sudden the Name-textfield is labelled as "Uw naam".

'PageCommentInterface.YOURNAME' defines respectively the file (PageCommentInterface(.js)) and the location (YOURNAME) where the translation should take place.

Ah right, DOH.

_t() = translate().

I'll have a fiddle with PageCommentInterface and let you know how I go.

A.

Right now I'm using jQuery Colorbox to submit product reviews, if you want the want a custom "Thank You" you could either Hide the Thank you with Jquery and have it show up with the submit button or create a thank you Page that gets called with a AJAX function and apply a custom template to that page so it doesn't render with the standard page-type template. Either way it will require adjusting the default validation or at least integrating the valadation call with enabling the on submit.