Clear search form?

[mdupras]

Hi all --

Is there a way to add a button that would clear all the selections made in a search form -- resetting the fields to the default choices?

-- Mike

[bahar_vm]

Hi Mike, Try the following code in the HTML block of the Search form:

<input type="reset" value="Reset" />

This should do it. Best, Bahar M.

[mdupras]

Thank you, Bahar! That does the trick. But I have a couple of follow up questions ...

1. Is there a way to make this button look the same as the Caspio-generated "Search" button?

2. Part of my form includes some check boxes that show and hide parts of the form. I would actually want to make this button only clear the form questions but not the check boxes if they are indeed checked. Could I write a function that would do that and make a button like this control the function instead of resetting everything?

Thanks!

-- Mike

[bahar_vm]

Hi Mike,

1. To get the style class of the search button you can add the class into that code as below:
 

<input type="reset" value="Reset" class = "cbSearchButton"/>

2. In this case, you need to write a Java Script function to clear the fields values and call the function on the button onclick event.
I do not have a sample code of this, but you should be able to do it if you know Java Script, here is a good source of Java Script tutorials:
http://www.w3schools.com/js/default.asp
or you might want to have Caspio Professional Services to custom develop the script for you.

Best,

Bahareh M.

[mdupras]

Thanks again -- but that still doesn't seem to work. The button still looks the same, without the Caspio style.

To write a function, I'll need to encase that in Java tags -- does that work in an HTML block? I tried putting the button in the footer and it creates problems with the other Java code I have there.

-- Mike

[BjornSkifs]

I have the reset button on the search page:

<input type="reset" value="Reset" />

But if I first search for something and then returns to the search page through the "Search again" link, then the previous search criteria are saved, and if I press Reset, they will be restored.

Can I change this so that also these entries are cleared when pressing Reset?

Thanks for any suggestions.

[MayMusic]

When you embed the DataPage in a web page "class = "cbSearchButton" won't work in here:

 

<input type="reset" value=" Reset " class = "cbSearchButton"/>

You can add a style tag to your HTML block where you have your button tag and copy paste the style of the DataPage if it is not an image button. For instance:

 

<style>
#resetbutton{
background-color: #2A497D;
border-color: #2A497D;
border-style: solid;
border-width: 1px;
color: #FFFFFF;
font-family: Verdana;
font-size: 12px;
font-style: normal;
font-weight: bold;
height: auto;
margin: 0 3px;
text-align: center;
vertical-align: middle;
width: auto;
}
</style>
<input id ="resetbutton" type="reset" value="Reset" />

 

 

</style>

[BjornSkifs]

Beautiful. Thank you so much!!!

[NailDyanC]

Hi, just to update this post. Caspio now has a Howto article about this solution, you may check this link for more details: https://howto.caspio.com/tech-tips-and-articles/common-customizations/how-to-add-a-reset-button-to-clear-a-form/

[ParkLoey]

Hi there! I found a similar post but this one reloads the page to not remember the previous search values or just reset the search fields. Hopefully this gives you another idea: