How to get javascript to reset a form?

Question

Why is this not clearing the form contents? I tried to apply the format as I have seen in resources and every thing else works fine.

The reset button at this point does everything it should be doing except clearing the input fields. I get no errors in DevTools.

  <form id="myForm" onsubmit="return valfunc()" onreset="return resetfunc()" ;>
          <div class="container">
            <div id="usrnm">
              <label class="control-label">Username: </label>
              <input class="form-control" type="text" name="username" id="username">
            </div>
            <div id="pswrd">
              <label class="control-label">Password: </label>
              <input class="form-control" type="password" name="password" id="password">
            </div>
            <div id="cnfrm">
              <label class="control-label">Confirm: </label>
              <input class="form-control" type="password" name="confirm" id="confirm">
            </div>
            <div id="ag">
              <label class="control-label">Age: </label>
              <input class="form-control" align:"right" type="text" name="age" id="age"> <br>
            </div>
          </div>

           <div class="buttons">
            <input type="submit" id="submit" class="btn btn-primary" onsubmit="valfunc();">
            <input type="reset" id="resetbutton" class="btn btn-default" onreset="resetfunc()">
           </div>
        </form>

The following is my function:

    <script>
        function resetfunc(){
          var form = document.getElementById("myForm");
          form.reset();
          document.getElementById("output").innerHTML = "";
          document.getElementById("cnfrm").className.clear;
          document.getElementById("output").style.visibility = "hidden";
          return false;
    </script>

Answer 1

There are a few small things such as "}" and ";" in your code you need to fix to get resetfunc() to work. Take a look at https://jsfiddle.net/alant/nvoztmh3/.

<form id="myForm" onsubmit="return valfunc()" onreset="return resetfunc()">
          <div class="container">
            <div id="usrnm">
              <label class="control-label">Username: </label>
              <input class="form-control" type="text" name="username" id="username">
            </div>
            <div id="pswrd">
              <label class="control-label">Password: </label>
              <input class="form-control" type="password" name="password" id="password">
            </div>
            <div id="cnfrm">
              <label class="control-label">Confirm: </label>
              <input class="form-control" type="password" name="confirm" id="confirm">
            </div>
            <div id="ag">
              <label class="control-label">Age: </label>
              <input class="form-control" align:"right" type="text" name="age" id="age"> <br>
            </div>
          </div>

           <div class="buttons">
            <input type="submit" id="submit" class="btn btn-primary" onsubmit="valfunc()">
            <input type="reset" id="resetbutton" class="btn btn-default" onreset="resetfunc()">
           </div>
        </form>

function resetfunc(){
          var form = document.getElementById("myForm");
          form.reset();
          //document.getElementById("output").innerHTML = "";
          //document.getElementById("cnfrm").className.clear;
          //document.getElementById("output").style.visibility = "hidden";
          console.log("resetfunc");
          return false;
}

You'll see console output "resetfunc". Let me know if it clears up for you.

Answer 2

You don't need JS to reset a form, just replace your reset button with this :

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

Answer 3

Remove the onreset="return resetfunc()" in the form tag and just do your cleanup (form.reset() etc.) in the onsubmit handler.

Answer 4

Primarily this issue is that return false will cancel the reset event and you don't want that, so remove that line.

Also, you don't have a closing } at the end of your function, your function refers to an output element that isn't present in your HTML and className.clear should be className = "".

Lastly, you should not be using inline HTML event attributes (onreset, onclick, etc.) in the first place. That is how event handling was done 20+ years ago and because of the fact that so many people just copy other people's HTML, the use of that technique just will not die. There are many reasons why you should not use this outdated technique. Instead, you should be following modern standards and best-practices. Separate your HTML from your JavaScript completely and use .addEventListener() to register events.

I've updated your code to follow these modern standards.

// Get all the DOM element references you'll need to use, just once:
const form = document.getElementById("myForm");
const output = document.getElementById("output");
const cnfrm = document.getElementById("cnfrm");

// Register your event handler(s)
form.addEventListener("submit", valfunc);
form.addEventListener("reset", resetfunc);

function valfunc(){
  // Submit code here
}

function resetfunc(){
  form.reset();
  document.getElementById("output").innerHTML = "";  
  cnfrm.className = "";
  document.getElementById("output").style.visibility = "hidden";
}

<form id="myForm" onsubmit="return valfunc()" onreset="return resetfunc()" ;>
          <div class="container">
            <div id="usrnm">
              <label class="control-label">Username: </label>
              <input class="form-control" type="text" name="username" id="username">
            </div>
            <div id="pswrd">
              <label class="control-label">Password: </label>
              <input class="form-control" type="password" name="password" id="password">
            </div>
            <div id="cnfrm">
              <label class="control-label">Confirm: </label>
              <input class="form-control" type="password" name="confirm" id="confirm">
            </div>
            <div id="ag">
              <label class="control-label">Age: </label>
              <input class="form-control" align:"right" type="text" name="age" id="age"> <br>
            </div>
          </div>

           <div class="buttons">
            <input type="submit" id="submit" class="btn btn-primary">
            <input type="reset" id="resetbutton" class="btn btn-default">
           </div>
        </form>
        
        <div id="output">test</div>