How to run submit on search form after dropdown update

[DesiLogi]

Hello All,

I thought I'd post this solution as I couldn't find it in the forums and it seems like it would be usable in a lot of situations. This method will run 'submit' in a search form when a dropdown in that form is updated. This way the user doesn't have to add an additional button click to view the results. It makes for a smoother U.X. 

First, and do this in the form's header, hide the Search form's submit button: 

<style>

input.cbSearchButton {
display: none!important;
}

</style>

Then  create a custom button to run 'Submit' but hide it. Also, give it an Id="myBtn" so the js can find it to run its onclick. 

<input id="myBtn" class="cb_submit" type="submit" value="View" style="display:none;" />

Now put some code to run when the dropdown is updated. In this case the dropdown is the first field in the Search form: 

<script type="text/javascript">

document.addEventListener('DataPageReady', function (event) {
 
var zr = document.querySelector('[name*=Value1_1]');
 
zr.onchange = function() {

document.getElementById("myBtn").click();

}

});

</script>

Hope this helps anyone looking for a similar solution--