Reset button on Search Form does not work as needed

[DLReich]

A reset button (<input type="reset" value="Reset" />) on a search form will reset changes made on that form but will not change fields left over from a previous search after Search Again  is clicked on the previous results page.  How can those previous search values be removed and the default values restored on the search form?

[MayMusic]

If you are using Caspio default search again feature reset will not work since search again is meant to remember the session. In this case, you need to create your own search again button which will go back to the search and will not remember the values.

Just create a custom link with the link to the search page.

[MayMusic]

Here is the code to create custom search again

<a class="cbResultSetSearchAgainLink" href="URL"><img alt="Search again" src="https://c0cmr140.caspio.com/images/dp/SA_magnifier.png" style="vertical-align: text-bottom; border: 0px;" title="Search again" /> Search again</a>

 

[DLReich]

Thanks very much.  The code works fine.  I labelled the button "New Search".  Is there any way to remove the "Search again" button or to relabel it "Modify Search"?

 

[telepet]

3 hours ago, DLReich said:

Thanks very much.  The code works fine.  I labelled the button "New Search".  Is there any way to remove the "Search again" button or to relabel it "Modify Search"?

 

@DLReich have you experimented in your Localization settings?  Under Labels and Markers I found an element called Search Again and was able to adjust its custom text to "Modify Search".  

 

By the way, I'm new to html and am not sure how to make a button in my search screen.  I tried the below...

 

<form action="URL_OF_YOUR_SEARCH_PAGE"><input type="reset" value="Reset Search" /></form>

...but it doesn't reset to an empty state.  I think I need to incorporate @MayMusic's code above, but I'm not quickly able to figure that out.

[DLReich]

Thanks for the reference to the Localization settings.  That did the job of renaming the Search Again button. 

I used @MayMusic's code with "URL" replaced by the url of the web page where I access my Caspio database.  On the Configure Results page (and Configure Details page), I first clicked insert (at the bottom of the list of elements) and then clicked Header and Footer.  Then I used insert again to create an HTML Block in the header.  I placed the code in the HTML Block in the header of both the results page and the details page.  To insert the code in the HTML Block, be sure to click Source before pasting the code.

[telepet]

Thanks @DLReich.  I got the following to work:

<a class="cbResultSetSearchAgainLink" href="[URL_for_my_search_page]"><style="vertical-align: text-bottom; border: 0px;" title="Search again" />Reset Search</a>

I took out the magnifying glass image.  I'm going to investigate how to turn the above into a button now....

[MayMusic]

Button code would be

<input type="button" onclick="window.location='[URL_for_my_search_page]'" value="Reset Search"/>

 

[telepet]

↑ Works perfectly.  Thanks, @MayMusic!

[MayMusic]

You are most welcome

 

[jasonkaeb]

If I may piggy back onto this thread as I have a similar challenge. 

@MayMusic Is there a way to incorporate something into this button that would clear external values or parameters that are loaded into this form on load. For example, I have a search form that t I have set to pass virtual field parameters to a results page. So that the user does not have to start over with search criteria every time they modify the search I have these same parameters being received into these search / virtual fields as well. I am looking for a button or some way to clear these external parameters for the user. I know that I can add "?cbResetParam=1" to the end of the URL but this then causes my search form to quit working with my reports datapage, which is setup to receive these search criteria and reload itself on the same page.

 

Thanks for your help.  

[MayMusic]

Instead of having search page to reload as the same page, put the URL of the search page as the destination and see how that works

[jasonkaeb]

Thanks for the quick reply. Since I am passing parameters into a reports page on the same page I am wanting to stay away from reloading the entire page if possible. This works really well with the new Caspio AJAX loading. Do you know if there is a way to clear external parameters (or set them all to NULL) using Javascript? 

[DevArora]

The behaviour of type='reset' is not to clear the form elements, but to return them to the initial/default values when the page was loaded. After you submit your form, if you are then passing the submitted values back to the form to be pre-populated (set as the initial values) of the form, then your reset button will only reset the fields to those passed values, not to a "clean" state. To actually clear the form, you will need to use Javascript.

Here is an example that would work for the HTML given in your question...

<script>
function customReset()
{
    document.getElementById("name").value = "";
    document.getElementById("country").value = "";
}
</script>

Just change your reset button to this...

<input type="button" name="reset" value="Reset" id="reset123" onclick="customReset();"/>

[MayMusic]

If you have ajax enabled the reset button would not work and as DevArora mentioned above you  need to clear the values with JS

[jasonkaeb]

Thanks for the replies on this. I was able to get this to work like you suggested. Thanks again. 

[MayMusic]

Nice !

[DefinitelyNot31337]

DevArora is correct about the behavior of reset buttons.

 

I just wanted to add my version JavaScript solution that will clear the values of all text elements on a specific DataPage. Just paste the snippet below in an HTML Block on Configure Search Fields Page (with HTML Editor disabled from the Advanced tab).

<button type="button" onclick="resetForm()">Clear Form</button>

<script>
var myForm = document.querySelectorAll('form[action*="[@cbAppKey]"] input[type=text]');

function resetForm() {
    myForm.forEach(function(elem) {
    elem.value="";
  });
}
</script>

 

Hope this helps.

`DN31337

[DefinitelyNot31337]

Compatibility Updates from my previous response.

 

With the Caspio 15.0 release, it seems that the solution provided above wouldn't work especially if your DataPage is a Report DataPage with Display Search Form Above results.

To make this work again, just place the line var myForm = document.querySelectorAll('form[action*="[@cbAppKey]"] input[type=text]'); inside function resetForm() or simply replace the whole code block with the updated one below:

<button type="button" onclick="resetForm()">Clear Form</button>


<script>
function resetForm() {
  
    var myForm = document.querySelectorAll('form[action*="[@cbAppKey]"] input[type=text]');
    myForm.forEach(function(elem) {
    elem.value="";
  });
}
</script>

 

This should still work for all DataPages.

 

Regards,

DN31337

[techguy]

DN31337, that code works great, any way to format(style) the reset button the same as the search button within this code ?

[techguy]

One more question - can someone help me with the position of the Submit button on a search datapage where the results are below the search?

 

I can make the button work, style the search button, and line up the fields, I just want the search button inline with the two search fields I have on the search page.. currently the search button is below the fields to enter for the search..

 

THANKS!

[Vitalikssssss]

Hi @techguy ,

You should hide a default button with CSS and add custom one in HTML block.

Place an HTML block at the bottom of a search fields list and insert following snippet of code there:

<div id="target"></div>

Finally, add the following snippet of code to search form Footer:

<script type="text/javascript">

  document.addEventListener('DataPageReady', moveBtn, false);

  function moveBtn() {
   var btn = document.getElementsByName('searchID')[0];
   var target = document.getElementById('target')
   target.appendChild(btn);
  }
  

 </script>
 <style type="text/css">
  .cbFormTableEvenRow {
   display: none;
  }
 </style>

Hope this helps.

Regards,

vitalikssssss

[Vitalikssssss]

On 11/23/2018 at 3:34 AM, techguy said:

DN31337, that code works great, any way to format(style) the reset button the same as the search button within this code ?

Here is a slightly updated code:

<button onclick="resetForm()" type="button" class="cbSearchButton">Clear Form</button><script>
  
function resetForm() {
  
    var myForm = document.querySelectorAll('form[action*="[@cbAppKey]"] input[type=text]');
    myForm.forEach(function(elem) {
    elem.value="";
  });
}
</script>

Regards,

vitalikssssss

[carlJS]

 

On 11/17/2018 at 7:45 PM, DefinitelyNot31337 said:

 

<button type="button" onclick="resetForm()">Clear Form</button>


<script>
function resetForm() {
  
    var myForm = document.querySelectorAll('form[action*="[@cbAppKey]"] input[type=text]');
    myForm.forEach(function(elem) {
    elem.value="";
  });
}
</script>

 

Hello y'all,

 

This solution is great. I have tested it. However, on my use case, I had dropdowns and textareas which were not affected by the reset.

I just wanted to share an updated code that will affect such.

<button type="button" onclick="resetForm()">Clear Form</button>


<script>
function resetForm() {
  
    var myForm = document.querySelector('form[action*="[@cbAppKey]"]').querySelectorAll('input:not([type=submit]):not([type=hidden]), textarea, select');
    myForm.forEach(function(elem) {
    elem.value="";
  });
}
</script>

 

[src="carl.js"]

[JMR21]

On 8/3/2018 at 7:47 AM, jasonkaeb said:

If I may piggy back onto this thread as I have a similar challenge. 

@MayMusic Is there a way to incorporate something into this button that would clear external values or parameters that are loaded into this form on load. For example, I have a search form that t I have set to pass virtual field parameters to a results page. So that the user does not have to start over with search criteria every time they modify the search I have these same parameters being received into these search / virtual fields as well. I am looking for a button or some way to clear these external parameters for the user. I know that I can add "?cbResetParam=1" to the end of the URL but this then causes my search form to quit working with my reports datapage, which is setup to receive these search criteria and reload itself on the same page.

 

Thanks for your help.  

Like @jasonkaeb, I am passing parameters from a search form onto 3 other data pages that are receiving the external parameter.  The form as well as the 3 resulting datapages all load on the same web page.  The above coding helped me get the form to clear with a reset button but the previous search data remains in the other data pages that are receiving the external parameter.  I'm not sure if I am missing some coding or perhaps have it placed in the wrong location? 

Any help is greatly appreciated!!