Auto Search after DropDown item selected

[Harris]

Hi, 

I wonder if anyone can assist please.

I would like a search to be initiated after a DropDown item is selected.

I have utilised this script that I found.

<script type="text/javascript">
/* Detect if a value is selected in your Dropdown and call a function, just don't forget to put the ID of your dropdown in the code below */
document.getElementByID('FieldName3').onchange = function() {myFunction()};

function myFunction() {
// submit the form if an value is selected
setTimeout('document.forms["caspioform"].submit()',1000);  

}

</script>

However this is not working. It may be that I have used the incorrect getElementByID and I have struggled to determine the correct ID. 

I tried two that I thought it may be, but still not working.

Is the script correct, or is it more likely that I have the incorrect ID?

Thanks

 

[CoopperBackpack]

Hello @Harris,

As far as I understand, this solution is needed for the Search on the Report DataPage.

The elements on the Search have unique IDs and the logic is the following:

1) For example, you have 3 search fields that are the fields from the DataPage data source.

Their IDs are: Value1_1 for the 1st field, Value2_1 for the 2nd field, Value3_1 for the 3rd field

2) If you use HTML blocks or/and Virtual fields, they affect the ID number. 

For example, there is one field, then an HTML block, and one more field. The IDs you can see on the screenshot

 

Since you used FieldName3 in your code, I assume that the dropdown is the 3rd element on the Search.

If so, you may test this code. Add it to the Footer section of the Search page. Disable the HTML editor on the Advanced tab before pasting the code.

<script>
document.addEventListener('DataPageReady', autoSearch);
  
function autoSearch() {
      const dropdown = document.querySelector("#Value3_1"); //this is the 3rd element
      const searchBtn = document.querySelector('.cbSearchButton');
      
   dropdown.addEventListener('change', function(event){
        searchBtn.click();
      });
};
</script>

Feel free to update this thread if you have further questions. 

[Harris]

Hi 

You are a star!

This worked exactly as you wrote, copy and pasted, and it worked.

Much thanks for the code, and in particular, for the guidance on how the naming convention works.

Regards,

Harris