I have a Drupal form that I'd like to add a "preview" button to. When this button is selected a thick box would appear with the form fields listed and themed. I've searched through the Drupal and Thickbox fourms, but cannot seem to get it all working.

1) What do I need for the button - something like this?

   $form['submit'] = array('#type' => 'submit', '#value' => 'Submit');
   $form['button'] = array(
    '#type' => 'submit', 
    '#value' => 'Preview',
    '#attributes' => array(
      'class' => 'thickbox', 
      'action' => '/test.php?KeepThis=true&height=400&width=600', 
      'target' => '/test.php?KeepThis=true&height=400&width=600'),
    );

2) And for the test.php file - something like this?


   print_r($_POST);

3) And finally - a change to thickbox to also activate on submit buttons (I found this code here: http://codylindley.com/thickboxforum/comments.php?DiscussionID=408&page=... )

function TB_init(){
$("form.thickbox").submit(function(){
var t = this.title || this.name || null;
var g = this.rel || false;
TB_show(t,this.action,g);
this.blur();
return true;
});

$("a.thickbox").click(function(event){
// stop default behaviour
event.preventDefault();
// remove click border
this.blur();

// get caption: either title or name attribute
var caption = this.title || this.name || "";

// get rel attribute for image groups
var group = this.rel || false;

// display the box for the elements href
TB_show(caption, this.href, group);
});
}

With this setup - my page behaves as if I had selected the "submit" button.

Cheers, Jason

Comments

wim leers’s picture

This is a GREAT idea. If we could implement this in a decent, clean way, I think Thickbox would stand a better chance for inclusion in D6 core.

I will probably work on this soon.

keesee’s picture

I like this Idea. Did anything ever come of this?

wim leers’s picture

Status: Active » Closed (won't fix)

Nope and it won't be necessary. See http://drupal.org/node/193311.

walker2238’s picture

If anyone is still looking for this type of feature is can be done by using a alt attribute for you inputs. I've only tried this with confirmation forms but I'm pretty sure it'll work else where.

Just make a module using hook_form_alter.

$form['buttons']['delete']['#attributes'] = array('class' => 'thickbox', 'alt' => '/node/' . $node->nid . '/delete?KeepThis=true&height=80&width=320');	

Thats what I did for the confirmation form for deleting nodes. I also made a page-node-delete.tpl file to only display the form itself.

jaochoo’s picture

I tried this approach but it does not work. First, there is no $node->nid, but this can be solved easily using a $form_nid = $form['nid']['#value']; in your hook_form_alter() to get the Node ID. However, the Thickbox does not show up, but the delete-button just redirects to the normal delete-page like before. I looked into the HTML using Firebug: The form alter definitely adds the class=thickbox and alt=... attributes.