Making some Views Exposed Filters auto-submit but not others

Question

Background

I'm using Views and Better Exposed Filters and Search API. I have my filters set to 'autosubmit' so when a user makes a change to a filter it auto-updates the search result.

What I want to accomplish

This is cool but I only want the results to auto-update when CERTAIN selections are made. Otherwise I want the user to have to click the 'search button'.

Example

For example, I want the user to have to click the 'search button' for some things such as the text boxes and some of the radio buttons, but for SOME of the checkboxes I want the search results to auto-update when a new selection is made.

Question

Is this possible programmatically (or I suppose in Views itself) and if so, how?

Answer 1

Gonna add my 2 cents too on the topic, since I recently did my reading-into this topic (autosubmit for exposed filters).

Related:

This answer here answers a very similar problem => https://drupal.stackexchange.com/a/198274/57183.

Usefull things to know

The most important piece of relevant documentation lies inside the ctools/js/auto-submit.js file of CTools, at the top of that file.

Form API programming

Following that documentation, you should use the FAPI to programmatically do one of the following:

1. Exclude the specific filters that you don't want to be trigger an autosubmit (if you have autosubmit active, like in your case):

   If you want to exclude a field from the ctool-auto-submit-full-form auto submission, add the class ctools-auto-submit-exclude to the form element. With FAPI, add:

   '#attributes' => array('class' => array('ctools-auto-submit-exclude')),

2. Include the filters that you want to trigger an autosubmit (if you have autosubmit deactivated, not your case)

   On gadgets you want to auto-submit when changed, add the ctools-auto-submit class. With FAPI, add:

   '#attributes' => array('class' => array('ctools-auto-submit')),

After that, you already have the functionality you need.

Example to the Example

Following your example here is some example code (with inline comments):

function somemodule_form_views_exposed_form_alter(&$form, &$form_state, $form_id) {

  // Assumption: Auto-submit is activated via the Views/BEF configuration for all filters
  // Therefore, we will exclude "the text boxes and some of the radio buttons..."

  $exposed_filters_to_deactivate = array(
    'full_text_search', // a text field
    'field_categories', // a radio button
  );

  foreach($exposed_filters_to_deactivate as $exposed_filter_name) {

    // This will disable auto-submitting the form for our filter element
    $form[$exposed_filter_name]['#attributes'] = array('class' => array('ctools-auto-submit-exclude'));

  }

}

This should do it, now the exposed filters full_text_search' and 'field_categories' will not trigger an autosubmit event, all other filters will.

Hope this helps!

Addendum (follow-up question):

To get specific checkboxes from a BEF-checkbox group to trigger a form submit, you need to do the following:

Modify you form_alter implementation:

function somemodule_form_views_exposed_form_alter(&$form, &$form_state, $form_id) {

  // Assumption: Auto-submit is activated via the Views/BEF configuration for all filters
  // Therefore, we will exclude "the text boxes and some of the radio buttons..."

  $exposed_filters_to_deactivate = array(
    'full_text_search', // a text field
    'field_categories', // a radio button
    'field_areas_of_interest_checkbox', // a BEF-checkboxes widget
  );

  foreach($exposed_filters_to_deactivate as $exposed_filter_name) {

    // This will disable auto-submitting the form for our filter element
    $form[$exposed_filter_name]['#attributes'] = array('class' => array('ctools-auto-submit-exclude'));

  }

  // This is the name of the select values and their target url
  $bef_checkboxes_autosubmit = array(
    '#area_of_interest_checkbox_1',
    '#area_of_interest_checkbox_3',
  );

  // This will attach a javascript to the checkboxes element
  $form['field_areas_of_interest_checkbox']['#attached']['js'][] = drupal_get_path('module', 'somemodule') . '/somemodule.js';
  $form['field_areas_of_interest_checkbox']['#attached']['js'][] = array(
    'data' => array(
      'bef_checkboxes_autosubmit' => array(
        'form_id' => $form['#id'],
        'checkboxes_ids' => $bef_checkboxes_autosubmit,
      )
    ),
    'type' => 'setting'
  );
}

Now, you also need a javascript file (somemodule.js) that will look sth like this:

(function($){

Drupal.behaviors.BEFCustomRedirect = {
  attach: function(context, settings) {
    $(settings.bef_checkboxes_autosubmit.checkboxes_ids).each( function( idx ) {
      $('.ctools-auto-submit-exclude.form-checkboxes input' + this).change(function() {
        $('#' + settings.bef_checkboxes_autosubmit.form_id).submit();
      });
    });
  }
}

})(jQuery);

Answer 2

Slight modification to existing accepted answer due to changes in BEF.

function somemodule_form_views_exposed_form_alter(&$form, &$form_state, $form_id) {

  // Assumption: Auto-submit is activated via the Views/BEF configuration for all filters
  // Therefore, we will exclude "the text boxes and some of the radio buttons..."

  $exposed_filters_to_deactivate = array(
    'full_text_search', // a text field
    'field_categories', // a radio button
  );

  foreach($exposed_filters_to_deactivate as $exposed_filter_name) {

    // This will disable auto-submitting the form for our filter element
    $form[$exposed_filter_name]['#attributes'] = array('data-bef-auto-submit-exclude' => '');

  }

}

Answer 3

For selected exposed filter auto-submit, you can use jQuery for those filters something like :

// Wait until document fully loaded
jQuery(document).ready(function($) {
    // Check if the filter exists
    if($('.views-exposed-form select').length){
        // Your change function
        $('.views-exposed-form select').change(function() {
            // Submit the form
            $(this).parents('form').submit();
        });
    }
});

Answer 4

You can use jQuery to automatically click something (in your case the submit button) when you click a certain div class or id.

For Example:

(function($) {
  $( "#clickme, #clickme2" ).click(function() {
     $('.submit-form')[0].click();
  });
})(jQuery);

JS Fiddle Example