CODEWITHSUNDEEP
jqueryajax
Nana Partykar
Nana Partykar

Reputation: 10548

Data Submitting Twice On Pressing Enter Key

I am working on todos. And, I was looking for submitting Todos through ajax on pressing 'enter' key.

It is working fine. But, there is one problem. It submits data 2 times for every press on 'enter' key. I don't have any submit button. I wanted to have on pressing enter key in textbox (#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>

I Used.

<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>

I don't know what is happening in code. If I put alert before e.preventDefault();. Alert message coming twice too on single 'enter' key press. Even I focus to other textbox after getting success message. But, No. It didn't worked. Any Hint/Suggestions.

Upvotes: 2

Views: 5539

Answers (3)

Chin Leung
Chin Leung

Reputation: 14921

The cause

By default, HTML will submit the form when the user press enter on the input. Therefore, in your keydown event, it's submitting once, but since you're not preventing the default, it's submitting another time.

How to fix:

  1. You could remove the keydown event.
  2. If you want to keep it, add a event.preventDefault(); or return false; inside your if case.

For scenario #2, the code would be:

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

As you can see in this issue here Prevent users from submitting a form by hitting Enter, the form is submitting without any event.

Upvotes: 4

dokgu
dokgu

Reputation: 6040

You don't need to bind the keyup or keydown anymore as pressing Enter should submit your form already.

Here's a Fiddle for you.

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!");
  })
});

Upvotes: 1

timehat
timehat

Reputation: 135

Try not binding the keydown event to the input field. Pressing enter in the input field appears to be triggering the submit action on the form automatically. Binding it yourself is where the duplicate comes from.

Upvotes: 0

Related Questions