Help with reset form button

I am trying to create a Clear Form button. I found the code for the button elsewhere online, and it works well, except it doesn’t clear the “Product(s)” combo box. Any ideas? My form is near the bottom of this page: Local Producer Resources - Western Agricultural Research Center | Montana State University

It’s pretty hard to help you without seeing code. Do you have a repo for this?

You should be able to just call reset on the form.

const form = document.querySelector('#caspioform');
form.reset();
<button onclick="resetForm()" type="button">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="";
  });
    var searchBtn = document.querySelector('.cbSearchButton').click();
}
</script>

I pasted the code from lasjorg, but it just displays as text on the screen

Did you put it inside a script element?

I copied and pasted into source code area

I don’t know what you mean by that.

<script>
  function resetForm() {
    document.querySelector('#caspioform').reset();
  }
</script>

I apologize for being unclear. I tried again, and your script worked pretty well, except now my Region radio boxes aren’t clearing. Is there a script that will clear all selections from all fields?

Here is the code currently:

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

<script>
  function resetForm() {
    document.querySelector('#caspioform').reset();
  }
</script>

It works for me on the site now, not sure why it isn’t for you.

Edit: Try doing a hard refresh (Shift + F5) to make sure you are not seeing cached code.

I tried the hard refresh, filled out the form, hit the clear form button, and one of the radio buttons still shows as selected under “Region(s)”.

Also, the clear form button does not clear the text field under Farm

That is really strange. I’ve tested the form in several different browsers and the clear functionality is working for me every time. Perhaps look at the console in the browser’s dev tools and see if you are getting any errors?

I found Dev Tools in Chrome, clicked Console, and there are two errors. Not sure if they are related to my form:
DevTools failed to load source map: Could not load content for chrome-extension://liecbddmkiiihnedobmlmillhodjkdmb/js/content.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
DevTools failed to load source map: Could not load content for chrome-extension://liecbddmkiiihnedobmlmillhodjkdmb/js/companion-bubble.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

Those are just missing source map errors and would have nothing to do with the actual code (they are used to help with debugging).

Have you tested this in other browsers?

Tested on Safari, Chrome, Firefox. I’m on a MacBook Pro. The Clear Form button doesn’t do anything at all on mobile (iPhone 8). But the mobile version is very buggy…I have a lot of other issues to work out there.

I don’t think I can help you out here any further (not that I really provided any help in the first place :slight_smile: ). I’m on Linux (and I tested on Win 10 as well) and the form reset() worked for me every time. I don’t have access to a mac right now so I can’t troubleshoot there. But HTMLFormElement.reset() has been supported by all browsers for quite a long time now, so I would be very surprised that it isn’t working properly on any browser you try.

Good luck.

1 Like