How to ajaxify webform submit in Drupal 7?

Question

I have tried to alter the webform rendering using hook_form_alter() and hook_node_view() in a custom module so I could add '#ajax' somewhere.

Has anybody already had some experience working with webform and ajax on D6 or D7 ? I guess the logic would be the same for D6 and D7 then just the implementation changes.

Answer 1

The Ajax Module works for me in Drupal 6.

For Drupal 7:

function mymodule_form_alter(&$form, &$form_state, $form_id) {
      // see if webform_client_form_ is in the form_id
      if(strstr($form_id, 'webform_client_form_')) {
        // get the nid so we can use it in the wrapper value
        $nid = $form['#node']->nid;
        // add the ajax properties to the submit button
        $form['actions']['submit']['#ajax'] = array(
          'callback' => 'mymodule_webform_js_submit',
          'wrapper' => 'webform-client-form-' . $nid,
          'method' => 'replace',
          'effect' => 'fade',
        );
      }
    }

function mymodule_webform_js_submit($form, $form_state) {
      // define the $sid variable (submission id from webform)
      $sid = $form_state['values']['details']['sid'];
      // if we have a sid then we know the form was properly submitted, otherwise, we'll just return the existing $form array
      if ($sid) {
        // first we have to load up the webform node object
        $node = node_load($form_state['values']['details']['nid']);
        // create an array up with the confirmation message, retreived from the webform node
        $confirmation = array(
          '#type' => 'markup',
          '#markup' => check_markup($node->webform['confirmation'], $node->webform['confirmation_format'], '', TRUE),
        );
        // return the confirmation message
        return $confirmation;
      }
      else {
        // return the form
        return $form;
      }
    }

Answer 2

One of the easiseast way if you are looking to ajaxify just a particular form will be to add the jquery form plugin. Its pretty straight forward.

Add the below code to you page preprocess function in template.php file.

1. First add the jquery plugin with below code.

   drupal_add_js(drupal_get_path('theme', 'your_theme') . "/js/jquery.form.js");

2. Then Add the below code, replace #your_form_ID with form id of yours

   drupal_add_js('

               (function($){ 
   $(document).ready(function() { 
   
               $("#your_form_ID").ajaxForm(function() { 
                   alert("Thank you for your comment!"); 
               }); 
   });     }(jQuery));;
   
          ', 'inline');
   

That's all you are done. Maybe you want to consider loading the scripts only the pages you need.

Answer 3

See if the Ajax module can help you with that. See the documentation as well