How Do You Make A Dropdown (From A Search Page) Filter A Results Page Without Pressing Search Button?

[Monoux]

I have a search form and a results page in the same webpage. The search form only has one field, which is a dynamic dropdown list. When I select a value from the dropdown list and click search the search is performed correctly and the results page changes accordingly.

 

What I'd like to do is get rid of the search button, add a dropdown arrow on the righthand side of the search dropdown field and when I make a selection the seach to be carried out automatically.

 

Any ideas how I might achive this would be greatly appriciated.

 

Cheers

 

Monoux

[LWSChad]

Try Faking the Click

CSS to hide the search button
#searchID {
  display: none;
}

JS to click the hidden button
document.getElementById('dropdownID').onchange = function(){
  document.getElementById('searchID').click();
}

[Monoux]

Hi Chad,

 

Thanks this has worked as required.

 

I've now discovered another small problem. When I select a value from the dropdown the results page is filtered on this selection, however the dropdown reverts to the default value. I think this might be confusing to the users. Do you have any idea how I can get the dropdown not to return back to the default value?

 

Just so you know this action is the same when I reveal the submit buttion and remove the onchange element.

 

Many thanks

 

Monoux

[jgorny]

In the form datapage, you need to go to the advanced tab and set your dropdown field to grab the external parameter you are sending on load. If you don't, the form will just reload on submission as if it was new.

[Monoux]

This fixed the problem.

 

Many thanks.

[JEllington]

I tried ezIQ’s solution, but apparently cannot figure out the correct value to use for ‘dropdownID’ in the…
document.getElementById(’dropdownID’) statement.
The element that holds the listbox on my submission form is Virtual2 and the listbox references todo_Desc.
I tried replacing 'dropdownID' with 'InsertRecordtodo_Desc' the name of the listbox field, to no avail. The error the console shows is "Cannot set property 'onchange' of null".

That error seems to me that document.getElementById(’InsertRecordtodo_Desc') can not find the todo_Desc field, I made sure the data page is using the correct table that todo_Desc field resides and the field name is identical. yet I still can not get the following script to work.
 

<SCRIPT>

document.getElementById('InsertRecordServ_Desc').onchange = function(){

  document.getElementById('Submit').click();

}

</SCRIPT>

Fresh eyes are always better than the tired ones of this JS novice, does anyone see any problems with the script and /or changes I should make. 
All suggestions and feedback are greatly appreciated.
Jim

 

 

[JEllington]

To share what I found on my problem in the above post..

 

With a dropdown field from the table fieldname, the ID would be InsertRecordFIELDNAME

but if the dropdown is in a virtual field, the ID is cbParamVirtualX

 

In my case I had another virtual field cascading off the referenced ID field. So I tried..
document.getElementsByName("InsertRecordFIELDNAME")[0] as stated in the JS Caspio Form Elements guide. Unfortunately this threw a "cannot read property of '0' error".
This is where I concluded that I should just use one field without any cascades attached to it, and now all is well.

I can not figure out the proper ID to use when the IDfield is a child of a virtual dropdown field. I would still like to go back to my original format of the virtual1 field being a dropdown to select category, then its child virtual2 cascading from virtual1 displaying the descriptions of categories then faking a click when a description is selected.

The question remains... what "dropdownID" would I use when the IDField is a child cascade of a dropdown?