按 Enter 键两次提交数据

Question

我正在处理待办事项。而且，我正在寻找通过ajax 在pressing 'enter' key 上提交待办事项。

它工作正常。但是，有一个问题。每次按下“输入”键，它都会提交 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

原因

默认情况下，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
    }
});

正如您在此问题中看到的Prevent users from submitting a form by hitting 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 事件绑定到输入字段。在输入字段中按 enter 似乎会自动触发表单上的提交操作。自己绑定是副本的来源。