Question

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

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

以下是我目前的代码：

＆＃13;

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

＆＃13;

<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>

＆＃13;

我做错了什么？

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>的{{1}}元素和标准方法preventDefault()：

reset界面的Event方法告诉用户代理，如果未明确处理事件，则不应该照常执行其默认操作。...调用{{1 }}在事件流的任何阶段都将取消事件，这意味着实现通常不会由于事件而执行任何默认操作。

preventDefault()

preventDefault()

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

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="#";
  }
});

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

4 个答案: