原因

Question

我正在研究待办事项。而且，我一直希望通过ajax pressing 'enter' key提交Todos。

工作正常。但是，有一个问题。它会在每次按下时提交2次数据，然后输入＆＃39;键。我没有任何提交按钮。我想在文本框中按下回车键（#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();之前发出警报。单个＆＃39;输入＆＃39;按键。获得成功消息后，我甚至会专注于其他文本框。但是，不，它没有用。任何提示/建议。

Answer 1

原因

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

如何修复：

您可以删除keydown事件。
如果您想保留它，请在if case中添加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键似乎会自动触发表单上的提交操作。自己绑定是副本的来源。

按Enter键提交两次数据

3 个答案:

原因

如何修复：

HTML

的jQuery