In Views 3, this is available as an option within Views. Go to the Advanced portion, and in Exposed Filters Settings, select Autosubmit. For more details, see http://drupal.stackexchange.com/questions/65585/views-exposed-filters-wi...

In earlier versions, you need the following:

Referring to this post http://drupal.org/node/306848 a javascript driven solution:

1) JQuery has to be called in the head of the page.

2) Then you paste this snippet 

<script type="text/javascript">
$(document).ready(function()
{
$("form#foo select").change(function() {
  $("form#foo").submit();
});
});
</script>

"Foo" stands for the id of the surrounding form element ...

Example HTML:

<form id="views-exposed-form" method="get" accept-charset="UTF-8" action="/xx/xx">
  <div class="views-exposed-form-div">
     <div class="views-exposed-widget">
       <select id="edit-tid-1" class="form-select" name="tid_1"><option selected="selected" value="All"><Alle></option></select>
     </div>
     <div class="views-exposed-widget">
       <input type="submit" class="form-submit" value="Anwenden" id="edit-submit-3"/>
     </div>
  </div>
</form>

Example Javascript for above HTML:

<script type="text/javascript">
$(document).ready(function()
{
$("form#views-exposed-form select").change(function() {
  $("form#views-exposed-form").submit();
});
});
</script>

This is the simplest example - other and more specific selector constructions are thinkable. Have a look at http://docs.jquery.com/Selectors.

Comments

jenlampton’s picture

jenlampton
she / her
commented

what version of JQuery does this require? I'm using the version that comes with drupal, and it does not work for me.

momper’s picture

momper commented

i'm sorry, because i forgot to mention that i always use the newest version of jquery update.
maybe this solves the problem ...

roper.’s picture

roper. commented

This works great for me, thanks!

But does anyone happen to know the best way to also HIDE the submit button at the same time? I'm sure I could do it with some separate JS, but it'd be nice to include it in the same function. I don't know anything about jQuery. :P

Thanks again.

momper’s picture

momper commented

try this (example):

<script type="text/javascript">
$(document).ready(function()
{
$("form#views-filterblock #edit-submit").hide();
$("form#views-exposed-form select").change(function() {
  $("form#views-exposed-form").submit();
});
});
</script>

i didn't test ...

szadok’s picture

szadok commented

Thanks !!

jdtart’s picture

jdtart commented

for me, it works once, the initial time I load the view, but if I choose a different option from the select dropdown, it does not work again unless I reload the page. Is there anyway for it to work each time?

DrupalNovice’s picture

DrupalNovice commented

Check out

momper’s picture

momper commented

@jdtart

did you found a solution? normally it should work on repeating selections too ...

DrupalNovice’s picture

DrupalNovice commented

momper, have you tried this?

seancorrales’s picture

seancorrales commented

I put this snippet in and had the same issue as jdtart. I resolved the issue by making sure that AJAX was not enabled on my view and that fixed it. Thanks for the code snippet!

tmsimont’s picture

tmsimont commented

This is problem because the example should be using:

Drupal.behaviors.whatever_you_want_to_call_this = function(context){
//... code
}

instead of:

$(document).ready(function(){
//... code
});

see http://drupal.org/node/304258

cartaclaudio’s picture

cartaclaudio commented

Thanks this worked instantly.

amcc’s picture

amcc commented

Here's an easy way to add the javascript to the header of the page - i'm doing it from a block, but it will work anywhere:

drupal_add_js('
			$(document).ready(function()
			{
			$("form#foo select").change(function() {
			  $("form#foo").submit();
			});
			});
			
		', 'inline');
sijuwi’s picture

sijuwi commented

Does anyone find the autosubmit to be slow?

walker2238’s picture

walker2238 commented

Because I'm not very good with javascript maybe someone could tell me the advantages of using these methods as opposed to adding the onchange() event in hook_form_alter()?

$form['this_form_id']['#attributes'] = array('onchange' => "$('#edit-submit-form_id').click()");
letsbuild’s picture

letsbuild commented

subscribing

Alex_W’s picture

Alex_W commented

In the most cases the jQuery call "$" is not working.
Try to call the function directly.

<?php
$form['this_form_id']['#attributes'] = array('onchange' => "jQuery('#edit-submit-form_id').click()");
?>
crackjs’s picture

crackjs commented

Hi

You can prevent auto submit on any field and write you'r own code

I wrote this answer already. check here