你的现有代码只处理了点击提交按钮的场景，但回车触发表单提交时，同样需要拦截重复提交。这里有个可靠的方案，通过给表单添加"已提交"的状态标记，来阻止后续的提交请求：

实现思路 #

给表单设置一个自定义属性（比如data-submitted），或者用一个变量记录提交状态。当表单第一次提交时，标记为已提交；之后不管是点击按钮还是按回车触发提交，只要检测到已提交状态，就阻止表单的默认提交行为。

完整代码示例 #

$(document).ready(function($) {
  $('#form_id').on('submit', function(evt) {
    // 检查表单是否已经提交过
    if ($(this).data('submitted') === true) {
      // 已提交，阻止默认行为
      evt.preventDefault();
      return false;
    }

    // 标记表单为已提交状态
    $(this).data('submitted', true);

    // 执行你原来的UI更新逻辑
    $('#submit_button_id').hide();
    $('#hidden_div_id').show();
  });
});

额外优化建议 #

• 如果你的表单是通过AJAX提交的，提交失败后记得重置提交状态，这样用户可以重新提交：

  // 假设AJAX请求失败的回调里
  $('#form_id').data('submitted', false);
  $('#submit_button_id').show();
  $('#hidden_div_id').hide();
  

• 也可以直接禁用提交按钮（比单纯隐藏更稳妥），避免用户看不到按钮后还尝试操作：

  $('#submit_button_id').prop('disabled', true).hide();
  

这样不管用户是点击提交按钮，还是按下回车键触发表单提交，只要已经提交过一次，后续的请求都会被拦截，完美解决重复提交的问题。

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