Function reset form in JS does not work

Asked

Viewed 1,530 times

0

The button clears the form but does not perform the rest of the functions

function reset() {
        var form   = document.getElementById("form");
        var nome   = document.form.nome.value;

        var set = confirm("Deseja apagar os dados do formulário?");
        if (set == true) {
            alert('Os campos do formulário foram resetados!');
            document.form.reset();
            document.form.nome.focus();
        }
    }

<button type="button" class="btn btn-dark btn-lg" onclick="reset();">Limpar</button>
javascript form

  • <button type="button" class="btn-dark btn-lg" onclick="reset();">Clear</button>

  • What "rest of the functions" is talking about ?

2 answers

1

You are using as a function name a name of a native Javascript method. This is generating a type of conflict. Clicking the button will call the native function reset() JS reset form and not called function you gave the same name of reset.

Try to name functions and variables where you can be sure that are not names of native functions or methods or reserved words of the language. As the language is in the English language, a good output to avoid conflicts is to give names in Portuguese.

What you have to do is give a different name to the function, it can be Reset (uppercase first letter, because JS differentiates uppercase from lowercase) or any other name you like (not reserved by language). In the example below I switched to resetar.

In addition, since you assigned the form to the variable form, doesn’t need document, otherwise will give error. Then you should remove these document.

It may also simplify the if only with if(set) instead of if(set == true). The variable alone in if already indicates that it should be true (just as !set indicates that it must be false):

function resetar() {
   var form   = document.getElementById("form");
   var nome   = form.nome.value;

   var set = confirm("Deseja apagar os dados do formulário?");
   if (set) {
      alert('Os campos do formulário foram resetados!');
      form.reset();
      form.nome.focus();
   }
}
<form id="form">
   <input type="text" name="nome">
   <button type="button" class="btn btn-dark btn-lg" onclick="resetar();">Limpar</button>
</form>

1

HTML has this native function.

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

If you want to enter a confirmation, you can intercept the reset function as follows:

var form = document.querySelector('form');

form.addEventListener('reset', function(e) {
  if(confirm("Do you really want to reset the form?")) {
    alert('Os campos do formulário foram resetados!');
  } else {
    e.preventDefault(); // Previne que a ação de reset seja executada;
  }
});
<!DOCTYPE html>
<html>
<body>

<form action="#">
  Email: <input type="text" name="email"><br>
  Pin: <input type="text" name="pin" maxlength="4"><br>
  <input type="reset" value="Reset">
  <input type="submit" value="Submit">
</form>

<p>Click on the reset button to reset the form.</p>

</body>
</html>

Browser other questions tagged javascript form

You are not signed in. Login or sign up in order to post.