How to create a reset button which asks if you are sure to reset

Question

I would like to create a reset button which confirms the reset it doesn't seem to work.

function clear() {
  if (confirm("Are you sure you want to reset the form?")) {
    document.getElementById("form-main").reset();
  } else {
    alert("You are safe!");
  }
navigator.vibrate([500,500,500,1000,500,500,500]);
}

<form id="form-main"></form>
<button type="button" id="reset" onclick="clear();">Reset info</button>

Can you please tell me where am I going wrong? Thanks!

By properly indenting the code and using whitespace instead of stuffing everything together into an unreadable mess, we can clearly see that your JS code is missing the closing brace at the end. If that isn't just a copy and paste error. — , May 04 '21 at 06:12
Yes I actually have a `navigator.vibrate` function below so I forgot to copy that. — User not found, May 04 '21 at 06:24

Simone Rossaini · Answer 1 · 2021-05-04T06:20:18.987

2

You didn't close the last }

document.getElementById('reset').addEventListener('click', clearForm);

function clearForm() {
  if (confirm("Are you sure you want to reset the form?")) {
    document.getElementById("form-main").reset();
  } else {
    alert("You are safe!");
  }
}

<form id="form-main">
  <input type='text'>
</form>
<button type="button" id="reset">Reset info</button>

Instead of use onclick function i suggest you to use addEventListener

Good question:

-addEventListener vs onclick

edited May 04 '21 at 06:20

answered May 04 '21 at 06:12

Simone Rossaini

8,115
1
13
34

If you're sure it's just the missing brace, this question shouldn't be answered but marked as typo. – May 04 '21 at 06:13
1

Normally yes, but I wanted to add value to the question by specifying the use addEventListener instead of onclick – Simone Rossaini May 04 '21 at 06:14
Obviously if it's wrong, I will delete and close question. – Simone Rossaini May 04 '21 at 06:16
It works but now the my form won't reset. – User not found May 04 '21 at 06:19
@naveen answer will open our eyes :) – Simone Rossaini May 04 '21 at 06:20
1

why the negative vote? This is also a very likely answer. The code was unindented and there was every chance that OP might have missed a brace – naveen May 04 '21 at 06:34

naveen · Accepted Answer · 2021-05-04T06:25:18.867

The problem is that your function name is clear(). It calls the deprecated document.clear()

console.log(document.clear)

So, change the function name to something else.

function clearForm() {
  if (confirm("Are you sure you want to reset the form?")) {
    document.getElementById("form-main").reset();
  } else {
    alert("You are safe!");
  }
}

<form id="form-main"><input type="text"></form>
<button type="button" id="reset" onclick="clearForm();">Reset info</button>

P.S: Please use addEventListeners rather than using inline event handlers

score 1 · Answer 3 · answered May 04 '21 at 06:45

There was a problem with the id="reset" it was messing with the function reset().

function clearForm() {
  if (confirm("Are you sure you want to reset the form?")) {
    document.getElementById("form-main").reset();
  } else {
    alert("You are safe!");
  }
}

<form id="form-main"><input type="text"></form>
<button type="button" id="resets" onclick="clearForm();">Reset info</button>

How to create a reset button which asks if you are sure to reset

3 Answers3