Submit form when field value changed

Question

I have a simple form with method GET as follow...

function MYMODULE_form($form, &$form_state) {
  $form['#method'] = 'get';
  $params = drupal_get_query_parameters();
  $form['cat'] = array(
    '#type' => 'select',
    '#title' => t('Categories'),
    '#options' => $categories,
    '#default_value' => isset($params['cat']) ? $params['cat'] : '',
  );
  $form['submit'] = array(
    '#type' => 'submit',
    '#value' => t('Submit'),
  );
}

GET actuly bypasses the default submit and validation functions, which is ok for me. I want to submit this form without submit button, when value in 'Categories' field is changed.

function MYMODULE_form($form, &$form_state) {
  $form['#method'] = 'get';
  $params = drupal_get_query_parameters();
  $form['cat'] = array(
    '#type' => 'select',
    '#title' => t('Categories'),
    '#options' => $categories,
    '#default_value' => isset($params['cat']) ? $params['cat'] : '',
    '#ajax' => array(
      'callback' => 'MYMODULE_form_submit',
    ),
  );
}

How should I do this?

Answer 1

Here is how I was able to do this using attributes...

'#attributes' => array('onchange' => 'this.form.submit();'),

So it was just simple ....

function MYMODULE_form($form, &$form_state) {
  $form['#method'] = 'get';
  $params = drupal_get_query_parameters();
  $form['cat'] = array(
    '#type' => 'select',
    '#title' => t('Categories'),
    '#options' => $categories,
    '#default_value' => isset($params['cat']) ? $params['cat'] : '',
    '#attributes' => array('onchange' => 'this.form.submit();'),
  );
}

Now I am able to submit form when field is changed.

Answer 2

Like this?

css:

MY_FORM_SELECTOR input[type="submit"] {display:none;}

without #ajax property:

JS:

$('CAT_SELECT').change(function() {
   $(this).closest('form').submit();
});

or with #ajax property on submit field:

$('CAT_SELECT').change(function() {
   $(this).closest('form').find('input[type=submit]').click();
});

UPDATE:

• Create a JS file in theme directory
• Open MYTHEME.info file and add scripts[] = JSFILENAME.js
• Open JS file and put it something like this:

code:

(function ($) {
  Drupal.behaviors.SomeUniqueName = {
    attach: function (context, settings) {
      $('CAT_SELECT').change(function() {
        $(this).closest('form').submit();
      });
    }
  };
})(jQuery);

clear the cache, that's it;

ps:// if you want to submit the form with AJAX, this gist can help you