jQuery Ajax Double Summit

Question

I have this issue where my form double posts data (created 2 entries in the table with a click). I have followed suggestions on stackoverflow and nothing seems to work. What could the issue be? I am rather a noob using AJAX so I have to make the assumption i am doing something stupid

The basic logic of this script is, submit and save data, if successful return successfull then redirect, otherwise display the output with a error message in a DIV.

Suggestions I have tried:

How can I prevent a double submit($.post) with jQuery

jquery ajax form submits twice

Prevent double submission of forms in jQuery

My Code so far:

$(document).ready(function() {
  $("#go").click(function(e) {
    e.preventDefault()
    e.stopImmediatePropagation();
    $.ajax({
      type: "POST",
      url: "controllers/newcases_controller.php",
      data: $('#casedata').serialize(),
      success: function(response) {
        if (response == 'success')
          window.location.replace("listcases.php");

        else
          /* clear old results, then display the new results */
          $("#divResults").empty().append(response);
      }
    });

    return false;
  });
});

This is part of the form, But i assume you only wish the see how the button is defined

<form role="form" class="form-horizontal" id="casedata">    
    <div class="form-group">
      <label class="col-sm-12" for="TextArea">Additional Address Details [ Max 200 Characters ] <span id="countdown2"></span></label>
      <div class="col-sm-12"><textarea class="form-control" id="additionaladdressdetails" name="additionaladdressdetails" placeholder="e.g Unit 123, Complex Street Name"></textarea></div>
    </div>



    <div class="form-group">
      <div class="col-sm-12">
        <button type="reset" class="btn btn-default pull-right">Cancel</button>
        <button type="button" id="go" name="go" class="btn btn-primary pull-right">Create Case</button>     
      </div>
    </div>

</form> 

Suggestions to try next?

Answer 1

IMHO it is always a bad idea to use :

   e.preventDefault()
    e.stopImmediatePropagation();

You should have a work around.

I don't know what could be the origin of your double submit, but it could come from 1/ $("#go").click event is registered twice. Maybe check it. 2/ As say in comments perhpas your #go is a type="submit.

Solution: You could desactivate the button when submit

 $("#go").click(function(e) {
$("#go").prop( "disabled", true )
$.ajax({
      type: "POST",
      url: "controllers/newcases_controller.php",
      data: $('#casedata').serialize(),
      success: function(response) {

    },
     complete:function(){
           $("#go").prop( "disabled", false)
    }
);
})