JQuery弹窗点击取消按钮时避免提交底层表单的问题排查

我一眼就看出问题所在了——你的Cancel按钮用了<input type="image">，这个类型的控件本质上是表单提交按钮，哪怕你绑定了关闭弹窗的逻辑，它还是会触发表单的默认submit事件，这就是为什么点击取消会提交表单的原因。另外你写的myfunction函数也有问题：你试图给按钮调用dialog("close")，但按钮本身不是dialog的容器，这个调用根本不会生效。

下面给你几个可行的解决方案，按推荐程度排序：

方案1：用jQuery UI Dialog自带的按钮配置（最规范） #

jQuery UI Dialog本身支持内置按钮配置，完全不需要自己在HTML里写Cancel和Login按钮，这样能彻底避免表单误提交的问题，代码也更整洁：

修改后的JavaScript代码 #

$(function() {
  // 初始化Dialog，直接配置按钮
  $("#LoginForm").attr('title', 'Login').dialog({
    autoOpen: false,
    closeOnEscape: true,
    modal: true,
    position: 'center',
    width: 350,
    height: 300,
    buttons: {
      // Cancel按钮逻辑：只关闭弹窗
      "Cancel": function() {
        $(this).dialog("close");
      },
      // Login按钮逻辑：提交表单
      "Login": function() {
        $("#LoginForm").submit();
        $("#dologin").css("border","1px solid black");
      }
    }
  });

  $(".opener").click(function() {
    $("#LoginForm").dialog("open");
    return false;
  });

  // 弹窗打开时自动聚焦密码框（注意事件名是dialogopen，不是shown.modal）
  $('#LoginForm').on('dialogopen', function () {
    $("#password").focus();
  });
});

修改后的HTML代码 #

直接移除原来的Cancel和Login按钮，因为Dialog会自动生成：

<div id="LoginBox" title="Login">
  <form method="post" action="clear_faults_submit.php" target="_self" id="LoginForm" name="form1">
    <div id="LoginAdminPINDiv">
      <div class="PINFormSubHeaderBold">Enter Admin PIN:</div>
      <div class="PINFormSubHeaderPass">
        <input type="password" id="password" name="password" placeholder="***" class="LoginInputBox" maxlength="4">
      </div>
    </div>
    <div class="feedback" id="feedback"></div>
    <div class="Clear">
      <div id="divider"></div>
    </div>
    <!-- 移除原来的按钮区域 -->
  </form>
</div>

方案2：修改Cancel按钮类型，阻止默认提交行为 #

如果你想保留自己的图片按钮，那需要把Cancel按钮改成type="button"（不会触发表单提交），或者给它绑定点击事件时阻止默认行为：

方法A：修改按钮类型 #

修改HTML里的Cancel按钮：

<input type="button" id="close_login" src="images/cancel.png" style="border: none; background: transparent; cursor: pointer;">

（加style是为了去掉默认按钮样式，让它看起来还是图片的样子）

然后在JavaScript里绑定关闭事件：

$("#close_login").click(function() {
  $("#LoginForm").dialog("close");
});

方法B：阻止默认行为（不修改按钮类型） #

如果不想改按钮类型，就在点击事件里阻止表单提交的默认行为：

$("#close_login").click(function(e) {
  // 阻止表单提交的默认行为
  e.preventDefault();
  // 关闭弹窗
  $("#LoginForm").dialog("close");
});

另外，你的Login按钮也建议加上e.preventDefault()，避免重复提交：

$("#dologin").click(function(e) {
  e.preventDefault();
  $("#LoginForm").submit();
  $("#dologin").css("border","1px solid black");
});

关键知识点回顾 #

• <input type="image"> 是表单提交控件，点击会触发所在表单的submit事件，这是HTML的默认行为
• jQuery UI Dialog的dialog("close")方法需要调用在初始化Dialog的元素上（也就是你的#LoginForm），而不是按钮元素
• 用Dialog内置按钮是最省心的方式，因为它的按钮不会触发表单默认提交

内容的提问来源于stack exchange，提问作者DCJones