How to submit Drupal Form in Lightbox with Ajax

Question

I have a form I've successfully loaded into a lightbox. The lightbox appears without any css or javascript. Modules, like Date Popup, do not work in the lightbox.

The ajax handler I've added to the submit button also doesn't work within the lightbox. Instead, the form submits as normal, taking the user away from their initial page to the URL I've assigned for the lightbox ( $items['entry/lightbox'] ). Form validation also fails to be kept within the lightbox only. I may have to investigate a javascript solution.

However the ajax handler works correctly on the submit button if the form is called outside the lightbox. I have a feeling all these issues are linked together by the fact the js/css is not being loaded in the lightbox.

My problem: Ajax submit button fails to execute in lightbox and prevent user from leaving the page.

My question: Assuming the missing JS (add CSS) is relevant to the problem, how do I load the JS & CSS needed by my form within the lightbox?

My Goal: From their home page (e.g. work/####/home), enable users to open form, insert values, validate & submit values to DB within lightbox without leaving their page.

Ideally, without closing, I want drupal messages, like form validation errors to appear within the lightbox to give the user a chance to correct the errors with their inputted values. I'd prefer a php validation, but I'm still open to jQuery.

My Code:

$items['work/%/home'] = array(
    'title' => 'Admin Home',
    'page callback' => 'fsa_work_page',//Callback not shown below
    'page arguments' => array(0),
    'access callback' => TRUE,
    'type' => MENU_CALLBACK,
);
$items['entry/lightbox'] = array( 
    'title' => 'Lightbox Overlay',
    'page callback' => 'fsa_lightbox',
    'page arguments' => array(0),
    'access callback' => TRUE,
    'type' => MENU_CALLBACK,
);
function fsa_lightbox(){
    $output = '';       
    $output .= drupal_render(drupal_get_form('fsa_daycare_roster_form'));
    print $output;
}
function fsa_daycare_roster_form(/*args*/){
$form['wrapper'] = array(
    '#markup' => '<div id="fsa_daycare_roster_form">Wrapper Div</div>'
);//I read this could somehow be used to capture drupal msg within the lightbox?
$form['fname'] = array(
    '#type' => 'textfield',
    '#title' => t('First Name'),
    '#prefix' => '<div id="form-left">'
);
$form['dob'] = array(
    '#type' => 'date_popup',
    '#title' => t('Date of Birth'),
    '#date_format' => $format,
    '#date_label_position' => 'none',
    '#date_year_range' => '-25:+0',
    '#required' => TRUE,
    '#suffix' => '</div>',
);
$form['submit'] = array(
    '#type' => 'submit',
    '#value' => t('Save Entry'),
    '#ajax' => array(
        'callback' => 'fsa_daycare_roster_form_submit',
        'wrapper' => 'fsa_daycare_roster_form',
        'method' => 'replace',
        'effect' => 'fade',
  ),
);
return $form;

function fsa_daycare_roster_form_validate($form_id, &$form_data){
    $fname = $form_data['values']['fname'];

    if(!is_string($fname) || empty($fname)){
    form_set_error('fname', t("Please Enter a valid First Name"));  
    }
        /*more*/
}
}//end form func

function fsa_daycare_roster_form_submit($form_id, &$form_data){
     $insertDaycare = db_insert($dcc_table)
    ->fields(array(
        'child_fname' => $form_data['values']['fname'],
        'dob' => $form_data['values']['child_dob'],
          /*more*/
    ))
    ->execute();
}

Any words of wisdom and sample code would be greatly appreciated. If in your experience you believe my approach is somewhat ineffective or inefficient, please let me know and provide an alternative. I would welcome it.

Thank You.

fmitchell fmitchell · Accepted Answer · 2012-07-19T21:09:32

I would suggest using the dialog API instead of lightbox, assuming by lightbox you mean 'a modal'.

Here is a good writeup by my friend Roger

For example, check out the examples module.

There is a specific example on using ajax.

For a real world example, I modified an add-to-cart button for Drupal Commerce with dialog that you can take a look at in my github

How to submit Drupal Form in Lightbox with Ajax

1 Answers