Clearing Values in A Search Form

[SDmesaweb]

I have a search form and a results form on the same page.  I reload the values in the search form (by receiving a parameter) so that the user can see what filters are being used to get the current results. 

This works great except...

When I try and use the reset() form method it will not remove values that were previously submitted.  I have also tried explicitly setting the value in those fields to nothing using something like this:

function clearForm () 
{

   document.getElementsByName('cbParamVirtual7')[0].value="";
   document.getElementById('cbParamVirtual17').value="";
   document.getElementById('cbParamVirtual18').value="";
   document.getElementById('cbParamVirtual19').value="";
  document.getElementById('caspioform').reset();

}

This does clear the checkboxes but will not clear the text fields if they have already been submitted in a query.  I have attached an screenshot of the search filters.

Any suggestions of how to solve this or work around the issue would be greatly appreciated.

Thanks,

Joel

[douvega]

Try this:

<p><a onclick="clearForm()" style="cursor:pointer;">Clear Form</a></p>

<script>
function clearForm () {
location.reload("[@cbHostPage]?cbResetParam=1");
}
</script>

Please note that when you search again for something, you need to get rid of "cbResetParam=1" in your URL. This is done when you redirect the page from your search form. As long as you do that, you may be fine.

Let us know whether or not it works.

[douvega]

Did you add the reset button by following this help article?

[SDmesaweb]

Yes I referenced that article but the setup is a little different:

Button:

<p><a onclick="clearForm()" style="cursor:pointer;">Clear Form</a></p>

Call this function:

function clearForm () 
{

   document.getElementsByName('cbParamVirtual7')[0].value="";
   document.getElementById('cbParamVirtual17').value="";
   document.getElementById('cbParamVirtual18').value="";
   document.getElementById('cbParamVirtual19').value="";
  document.getElementById('caspioform').reset();

}

 

As you can see I have tried several different methods to get the desired result, none of them being completely successful.

[SDmesaweb]

No such luck.  It reloads the page but the values in search form persist as well as the filtered data.

Edit: Got this to work.  I took the action out of the on click function and just made it a generic link.

<p><a href="[dataPageURL]&amp;cbResetParam=1">Clear Form</a></p>

Works great!  Thanks for the suggestion.