javascript - 提示确认框，取消应该停止执行

Question

我有一个提示框，当我点击删除用户时，应该要求确认是否要删除该用户，HTML

<form name="myform" id="myform" action="/AWSCustomerJavaWebFinal/DeleteUser" method="POST" onSubmit="myFunction()">
  Choose User:
  <br>
  <select name="selectUser" multiple style="width: 200px !important; min-width: 200px; max-width: 200px;">
    <c:forEach var="user" items="${listUsers.rows}">
      <option value="${user.id}">
        <c:out value="${user.userId}" />
    </c:forEach>
  </select>
  <input type="submit" value="Delete User" class="btn btn-primary" />
  <input type="reset" value="Reset" class="btn btn-primary" id=button1>
</form>

javascript

function myFunction() {
  var confirm = prompt("Do you want to continue", "yes");
  if (confirm == yes) {
    var form = $('#myform');
    form.submit(function() {
      $.ajax({
        type: form.attr('method'),
        url: form.attr('action'),
        data: form.serialize(),
        success: function(data) {
          var result2 = data;
          alert("deleted")
        }
      });
      return false;
    });
    $(document).ready(function() {
      $(document).ajaxStart(function() {
        $("#wait").css("display", "block");
      });
      $(document).ajaxComplete(function() {
        $("#wait").css("display", "none");
      });
    });
    return false;
  } else {
    alert("User not deleted")
    return false;
  }
  return false;
}

它要求确认，如果我在文本框中输入yes后按确定，它会转到servlet，并且不会给出警报(“已删除”)，并且我返回了false，按提交后它仍然刷新另外，如果我按取消，它仍然会执行并删除用户。我尝试了很多不同的方法，但这里似乎没有任何效果。提前致谢。

Answer 1

一句漂亮的话:

if( !confirm("Do you want to continue?") ) return alert("User was not deleted.")

return将停止该函数的执行。

您有一个form.submit(function() { $.ajax... 每当提交表单时，无论您设置什么验证机制，都会触发您的 ajax 调用。

这是代码的干净、重写版本:

HTML 中:<form onSubmit="confirmSubmission()"> (比 myFunction() 更明确一点；)

$(document).ready(function() {
    var $wait = $("#wait");

    $(document).ajaxStart(function() {
        $wait.hide();
    }).ajaxComplete(function() {
        $wait.show();
    });
});

function confirmSubmission() {
    if ( !confirm("Do you want to continue")) return alert("Submission has been canceled.")

    submit();
}

function submit(){
    var $form = $('#myform');
    $.ajax({
        type   : $form.attr('method'),
        url    : $form.attr('action'),
        data   : $form.serialize(),
        success: function(data) {
            var result2 = data;
            alert("deleted")
        }
    });
}