如何在确认框中单击“确定”后重置表单？

Question

我有一个带有重置按钮的表单，可以清除整个表单，但是我想要一个确认对话框弹出并确认用户想要重置。

我有确认框工作，但如何在按下确定按钮时重置表单？

以下是我到目前为止的代码：

function reset() {
  var r = confirm("Are you sure you want to reset all text?");
  if (r == true) {
    form.reset();
  }
}

<form>
  <p>Full Name</p><br><input name="fname" type="text" placeholder="Full Name"><br>
  <p>Address</p><input name="address" type="text" placeholder="Address"><br>
  <p>Email</p><br><input name="email" type="email" placeholder="Email"><br>
  <input type="submit"> <button onclick="reset()" type="button">Reset</button>
</form>

我究竟做错了什么？

Answer 1

试试这个：

HTML：

<input type="reset" onclick="return confirm_reset();">

JS：

function confirm_reset() {
    return confirm("Are you sure you want to reset all text?");
}

当onclick函数返回false时，它会阻止重置按钮的默认操作。

DEMO

Answer 2

在表单中添加一个id然后只是......

document.getElementById("myForm").reset();

met form reset

Demo

Answer 3

使用<button>类型的reset元素和标准方法preventDefault()：

Event接口的preventDefault()方法告诉用户代理如果事件没有得到明确处理，它的默认操作不应该像通常那样进行....在事件流的任何阶段调用preventDefault()取消事件，这意味着任何事件通常由于事件而不会发生的默认操作。

document.querySelector('form').addEventListener('reset', function(event) {
  if (!confirm('Are you sure you want to reset?')) {
    event.preventDefault();
  }
});

body {
  display: flex;
}

fieldset {
  margin: 0 0 16px;
}

[type="reset"] {
  float: right;
}

<form>
  <fieldset>
    <legend>Full Name</legend>
    <input name="name">
  </fieldset>
  <fieldset>
    <legend>Address</legend>
    <input name="address">
  </fieldset>
  <fieldset>
    <legend>Email</legend>
    <input name="email" type="email">
  </fieldset>
  <button type="submit">Submit</button>
  <button type="reset">Reset</button>
</form>

Answer 4

你可以使用JQuery！

HTML：

<input type="reset">

JS - JQuery

$(document).on('click', 'input[type="reset"]', function(e){
  if(confirm("Are you sure you want to reset form data?")){}
  else{
   e.preventDefault();
   window.location="#";
  }
});