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.

Just a small comment, why don't u make first_req.php call sencond_req.php when it finishes so u would save two requests to the user. — Mohammed Joraid, Jan 10 '14 at 05:40
@Mohammed Joraid, I could not understand ur question( why php is related to this?) — cbnvbxcbvnbxcbv, Jan 10 '14 at 05:42
oh sorry about that. All what i meant is, why php is being added as a question tag while it's not related to the question. As it seems, your issue is solely related to HTML and JQuery. — Mohammed Joraid, Jan 10 '14 at 08:08
btw, there are two answers below. Kindly select the answer that provides u with the solution, if they don't, then pls leave a comment to let the answer writer know that his answer is not accurate. Thanks. — Mohammed Joraid, Jan 10 '14 at 08:10

score 0 · Answer 1 · answered Jan 10 '14 at 05:03

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

score 0 · Answer 2 · edited May 23 '17 at 11:44

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:

Prevent default behavior by adding e.preventDefault();. Read -> jQuery AJAX Form Submit Example
```
$('#form1').submit(function (e) {        
    e.preventDefault();
    //the rest of code.
```

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

Why data is being submitted twice through ajax?

2 Answers2