Why data is being submitted twice through ajax?

Question

I am using codeiniter framework. I want to Submit form data in database throught ajax coll and after success submiting form process I want to refresh specific div through other ajax request.

But When I press Enter Key for submit form then data is being submitted twice. I want submit data by ajax once time with on enter key press.

My code like-

$('#form1').submit(function () {
var id = $('#id').val();
var comment_text = $('#comment_text').val();
$.ajax({
  data: {'id' :id,'comment_text':comment_text},
  type: "POST",
  url: "first_req.php",
  dataType : "json"
  success: function(data){
    if(data.status =="Success")
     {
    $.ajax({
      data: {'id':id},
      type: 'GET',
      url: 'sencond_req.php',
      contentType : "application/x-www-form-urlencoded; charset=UTF-8",
      success: function (data) {
        $('#com_display').html(data);
      }            
    });
     }
     }
    });
  return false;
      });

HTML-

<div id="com_display"></div>
<form id="form1" name="form1">
<input type='hidden' id='id' name='id' />
<input type='text' id='comment_text' name='comment_text' />
</form>

When I type hi in comment box and press enter button then data two times will be submitted in database.

Please give me any solution to solve it.

Answer 1

Even though you are submitting the data using ajax request, you are not stopping the default action of the form submit.

You can call the event.preventDefault() to do this.

$('#form1').submit(function (e) {
    //prevent the default form submission
    e.preventDefault();
    var id = $('#id').val();
    var comment_text = $('#comment_text').val();
    $.ajax({
        data: {
            'id': id,
            'comment_text': comment_text
        },
        type: "POST",
        url: "first_req.php",
        dataType: "json"
        success: function (data) {
            if (data.status == "Success") {
                $.ajax({
                    data: {
                        'id': id
                    },
                    type: 'GET',
                    url: 'sencond_req.php',
                    contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                    success: function (data) {
                        $('#com_display').html(data);
                    }
                });
            }
        }
    });

});

or return false from the event handler if you want to prevent the default and action and stop the bubbling of the submit event

Answer 2

Possible duplicate of this , this and this

In the Documentation READ HERE

(Bind an event handler to the "submit" JavaScript event, or trigger that event on an element.)

In other words, when you click enter you will trigger default submit of the form, and also your jquery will submit the form.

Solution:

1. Prevent default behavior by adding e.preventDefault(); . Read -> jQuery AJAX Form Submit Example

    $('#form1').submit(function (e) { e.preventDefault(); //the rest of code. 

2. remove default behavior

    $('form').submit(function(){ $(this).find(':submit').attr('disabled','disabled'); }); 

3. Only submit the form thru jquery when it actually submits (no resubmitting)

 
 
 
 
  
  
  $(document).on("submit", "form.form1", function(event){ alert(1); });