使用警报确认提交

Question

我需要确认提交按钮，取消或确定。

如果没问题，它会提交表单并执行预定义的操作。

如果您取消，请关闭消息并留在同一页面上。

我的java脚本代码只是运行提交，操作没有取消。

感谢您的帮助。

function envio() {
  var r = confirm("Tem certeza que deseja excluir este registro?");
  if (r == true) {
    window.location = "edicao-demandas-result.lbsp";
    form.submit();
  }
}

<form method="post" name="form" action="file.html">
  <div class="w3-row-padding">
    <div class="w3-col w3-center w3-rest">
      <label class="w3-text-blue w3-small">ATTENTION...
      </label><br>
      <input type="submit" class="w3-comp-btn w3-blue w3-round"
          value="Delete Record" name=LBWEB_DELETERECORD onClick="envio();">
    </div>
  </div>
</form>

Answer 1

您需要将事件传递给您的函数并使用preventDefault() 阻止提交。

function envio(event) {
  event.preventDefault();
  var r=confirm("Tem certeza que deseja excluir este registro?");
  if (r==true) {
    window.location="edicao-demandas-result.lbsp";
    form.submit();
  }
}

<form method="post" name="form" action="file.html">
  <div class="w3-row-padding">
    <div class="w3-col w3-center w3-rest">
      <label class="w3-text-blue w3-small">
        ATTENTION...
      </label>
      <br>
      <input id="mySubmit" type="submit" class="w3-comp-btn w3-blue w3-round"
          value="Delete Record" name="LBWEB_DELETERECORD" onClick="envio(event);">
    </div>
  </div>
</form>

Answer 2

因为即使捕捉到点击事件，也不会停止表单操作。为此，您需要在函数中调用 event.preventDefault()

Answer 3

你需要一个简单的confirm 和if 语句：

if (confirm('text')) {
    alert('do stuff')
}

如果你点击ok，则if块中的代码将被执行，如果cancel - 不会发生其他任何事情，你只会停留在这个页面上。

Answer 4

这是因为您使用 onclick 和 submit 输入。此类元素的默认行为始终是提交表单。

如果您将类型更改为button，它应该可以工作。示例：

<input type="button" class="w3-comp-btn w3-blue w3-round" value="Delete Record" name="LBWEB_DELETERECORD" onclick="envio();" />

这是您的代码使用这种方法的外观：

function envio() {
  var r=confirm("Tem certeza que deseja excluir este registro?");
  if (r==true) {
    form.submit();
  }
}

<form method="post" name="form" action="file.html">
  <div class="w3-row-padding">
    <div class="w3-col w3-center w3-rest">
      <label class="w3-text-blue w3-small">ATTENTION...</label>
      <br/>
      <input type="button" class="w3-comp-btn w3-blue w3-round" value="Delete Record" name="LBWEB_DELETERECORD" onclick="envio();" />
    </div>
  </div>
</form>