Jump to content

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

Recommended Posts

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.





Link to comment
Share on other sites

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



Link to comment
Share on other sites

  • 2 weeks later...
  • 3 months later...

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.

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

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.



Link to comment
Share on other sites

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?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...