按Enter键两次提交数据

Question

我正在做todos。而且，我想通过ajax在pressing 'enter' key上提交Todos。

它运行良好。但是，有一个问题。每次按下"回车"键，它会提交2次数据。我没有任何提交按钮。我想按一下文本框中的回车键（#todos-t_description）。

<form id="create-todos-form" action="/misc/todos/index" method="post">
  <input id="todos-t_description" class="t_description form-control" name="Todos[t_description]" type="text">
  <select id="todos-t_case_id" class="form-control" name="Todos[t_case_id]">
      <option value="">Related to case</option>
  </select>
</form>

我用过。

<script>
window.addEventListener("DOMContentLoaded", function() {
  jQuery(document).ready(function($){
    $('.t_description').keydown(function (event){
      if (event.keyCode == 13) {
        $('#create-todos-form').submit();
      }
    });
    $('#create-todos-form').on('submit', function(e) {
      e.preventDefault();
      var form = $(this);
      var formData = form.serialize();
      $.ajax({
        url: "/misc/todos/create",
        type: "POST",
        data: formData,
        success: function (data) {
          $("#todos-t_completed_date").blur(); 
          $('tbody').append(data);
          $('.t_description').val("");
          $('#todos-t_completed_date').val("");
          $('.noTodos').hide();
        },
        error: function () {
          alert("Problem Ocurred");
        }
      });
    });
  });
}, false);
</script>

我不知道代码中发生了什么。如果我把警报放在e.preventDefault();之前。单次按下"回车"键时也会出现两次警告信息。甚至在收到成功消息后，我也会把注意力集中在其他的文本框上。但是，没有。它没有起作用。任何提示/建议。

Answer 1

原因

默认情况下，当用户在输入上按enter键时，HTML将提交表单。因此，在keydown事件中，它会提交一次，但由于您没有阻止默认值，所以它会提交另一次。

如何修复：

1. 您可以删除keydown事件
2. 如果您想保留它，请在If案例中添加event.preventDefault();或return false;

对于场景#2，代码为：

$('.t_description').keydown(function (event){
    if (event.keyCode == 13) {
        $('#create-todos-form').submit();
        event.preventDefault(); // To prevent the default HTML form submission
    }
});

正如您在本期文章中看到的，通过点击Enter阻止用户提交表单，表单是在没有任何事件的情况下提交的。

Answer 2

您不需要再绑定keyup或keydown，因为按Enter键应该已经提交了您的表单。

给你一个Fiddle。

HTML

<form id="create-todos-form" action="/misc/todos/index" method="post">
  <input id="todos-t_description" class="t_description form-control" name="Todos[t_description]" type="text">
  <select id="todos-t_case_id" class="form-control" name="Todos[t_case_id]">
    <option value="">Related to case</option>
  </select>
</form>

jQuery

$(document).ready(function() {
  $("#create-todos-form").on("submit", function(e) {
    e.preventDefault();
    alert("I was submitted!");
  })
});

Answer 3

尝试不将keydown事件绑定到输入字段。在输入字段中按下回车键似乎会自动触发表单上的提交操作。你自己装订是复制品的来源。