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-- 

[Colhaveago]

Hi Desilogi,

This post looks exactly what I want to do.  I am not a programmer, so, I don't really understand how this works.

I copied you post and posted into my datapage Header (With enable HTML Editor off).  When tested, it got rid of the submit button and showed the search dropdown but when I changed the dropdown it did not proceed.  I wondered if it was because of the sentence,

document.querySelector('[name*=Value1_1]')

should I have changed that?

I only have one item on my search page, it is a dropdown called Currency.

 

Perhaps you could give some clues where I am going wrong

 

Thanks

 

Col

[DesiLogi]

Hi @Colhaveago,

You may want to make sure you have jquery referenced on the datapage (in the header). There are a number of ways to do it but something like this: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

Also, check to make sure your drop down field is the first in the list of elements. If you have an HTML block before it, that counts as an element and you'd need to change the Value1 to Value2, etc., accordingly. 

I usually put the <script> </script> in the footer, as well. Hope this helps! 

[CoopperBackpack]

Hello @Colhaveago,

If I understood your request correctly, you would like to hide the Search button and click on it automatically when the value in the Dropdown is changed.

If this is correct you can test the following solution:

1) In the Header of the Search page add the styles to hide the Search button. Disable the HTML code before pasting the code.

<style>
form[action*="[@cbAppKey]"] .cbSearchButtonContainer{
 display: none !important;
}
</style>

2) In the Footer add the following code (disable the HTML code before pasting the code):
 

<script>
document.addEventListener('DataPageReady', function (event) {
    const searchField = document.querySelector('#Value1_1'); //Value1_1 stands for the first field on the search page
  
    searchField.addEventListener('change', (e) => {
         const searchButton = document.querySelector('form[action*="[@cbAppKey]"] .cbSearchButton');
              searchButton .click();     
         })
});
</script>

If you have only one field on the Search page its ID = Value1_1.

Please note that any other element on the Search page matters. For example, if you have an HTML block as the 1st element on the Search page, its ID = Value1_1 and the ID of the Currency field = Value2_1

If you have further questions, feel free to ask in this thread. 

[Colhaveago]

@CoopperBackpack

Thank you for your kind help.

You understood exactly what I want to achieve. I will test it and report back

 

Again thanks

[Colhaveago]

@CoopperBackpack I tested your solution and it is really good.  I especially appreciated your instructions/ screen shots  about what to 'copy and paste'  where, it made it so easy, (esp for me a non programmer).

The solution does not automatically submit the default on load (and I did not ask for that either 🙂). However, seeing the code in action in the flesh , it would 100% perfect if 'submits the query on load'.  This would mean the user only has to act if they want the product price in a non default currency.  I have checked 'Results below Search Form'  so the result looks really nice.

So, am I stretching the friendship in asking if you can update the information you provided to automatically submit on load?  

Thank you for your help

[CoopperBackpack]

Hello @Colhaveago,

You are welcome.

I understood the workflow as follows: when the users open a Report DataPage, they should be able to see all the records stored in the Report data source. Then they can choose the currency in the search field (optional).

If this is correct, there is a default option to display results on the initial load:

If this is not the case, feel free to update this thread and provide more details.

[Colhaveago]

Hi @CoopperBackpack,

 

Sorry about the delay in responding (busier than a single flea on a pack of wild dogs 🙂 )

Your solution is 90% good. The 10% is Caspio's obscure way of handling the solution when deployed on a website and viewed on a cell phone in portrait mode (fine in landscape). Caspio hides all the search options in portrait. This means the end user is presented with just a search button and none of the search fields above . Not only does it look stupid to the end user, it mean they cannot change the default. In our case the default is the product currency.

I discovered that in portrait mode if you press the search button Caspio will bring up the search fields  (but that is far to counter intuitive to be useful for 99% of the users )

 

Thanks for your helps any more ideas will be most welcome

[Colhaveago]

Hi @CoopperBackpack,

I missed an important part of my digging in to your solution.

I went back to basics when I was having issues.  I made the most simple Datapage , no scripts and just a simple dropdown  in the search, added 'search results below search form' and checked 'display results on initial load'  (as per your last post) 

It was this simple datapage that lead me to understand it wasn't your solution, it was an obscure implementation by CASPIO

You can replicate this in minutes.

[CoopperBackpack]

Hello @Colhaveago,

I hope I understood your concern correctly. The default behavior of the search button in the mobile view differs from the desktop view.

By adding some styles, it is possible to show the search fields on mobile. 

Let me update all the steps for this solution:

1) On the 'Search Type' page select Results below Search Form > Display results on initial load 

2) On the 'Configure Search Fields', in the Header add the styles (disable the HTML editor before pasting the code)

<style>
form[action*="[@cbAppKey]"] .cbSearchButtonContainer{
 display: none !important;
}

@media only screen and (max-width: 576px) {
 
form[action*="[@cbAppKey]"] section[class^="cbFormSection"][class*="cbSearchSpa"] div[class*="cbSearchButtonContainerM"] {
    display: none!important;
}
 
form[action*="[@cbAppKey]"] section[class^="cbFormSection"][class*="cbSearchSpa"] div {
    display: block;
}
 
}
</style>

3)  On the 'Configure Search Fields', in the Footer add the JavaScript code (disable the HTML editor before pasting the code)

<script>
document.addEventListener('DataPageReady', function (event) {
    const searchField = document.querySelector('#Value1_1'); //Value1_1 stands for the first field on the search page
  
    searchField.addEventListener('change', (e) => {
         const searchButton = document.querySelector('form[action*="[@cbAppKey]"] .cbSearchButton');
              searchButton .click();     
         })
});
</script>

Please test the updated version (I modified styles). I hope it works as expected.