Form submission with jQuery in Drupal 6

Question

I am using Drupal 6 and I have a very simple form with only three fields that I created in a custom module. I also placed the form as a block in the left nav. This is a search form. It has two select boxes and one free form text field. The goal is to be able to take the values from the fields and use jQuery to make an AJAX call, perform the search and return JSON to the front end with the results and have jQuery loop through and display the results. I'm really having difficulties following the Drupal work flow though, especially since the form is in a block. So how in my hook_form_submit do I handle the jQuery call properly? Ideally, I would like it to where whatever page they are on, if they fill out the form in the left sidebar and submit it, they get ported to a "results" page that handles the jQuery, but I just can't figure out the proper flow of how/when/where to add the JavaScript/jQuery to handle this correctly. If I am in my hook_form_submit and attempt to process the form, how would I get the results to a results page in the main content area?

THANKS

Answer 1

I feel like you have conflicting requirements here. You want to load the results of the form with ajax but you also want to redirect the user to a results page.

If your going to redirect the user to another page just create the search form in views then in the form submit do a drupal_goto('search-page'). Since your doing a page load ajax is unnecessary.

If you want to load the results without doing a page load this is where ajax comes in handy. Then I would just skip drupal altogether with the ajax handler. do not add a button type submit just a button without a handler. Then in an ajax file attach a behavior to the button press.

The ajax should call some unique url for this ajax callback like 'ajax/search-form'. Register this url in your hook_menu like

$items['ajax/search-form/%/%/%'] = array(
  'title' => 'my title'
  'page callback' => 'my_module_ajax_search'
  'page arguments' => array(2,3,4),
);
return $items;

Then in your function:

function my_module_ajax_search($first_param, $second, $third) {
  // Generate output and return it to the calling ajax function through print.
  $output = '<div>my output</div>'
  print $output;

  // Make sure Drupal closes out then bails so it doesn't output another
  // page wrapper.
  module_invoke_all('exit'); // Called automatically in Drupal 7 but not 6.
  exit(); 
}

Your Ajax would look something like:

$('.button').click(function(
  value1 = $('.box1').value() // dont remember the actual function to extract a text field value.
  value2 = ...
  $.ajax({
    url: Drupal.settings.basePath + 'ajax/search-form/' + value1 + '/' + value2 + '/' + value3,
    success: function(data) {
      $('.my content').html(data);
    }
  });
)