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?

this can also happen when you included your js file twice in the html. — Dexter Bengil, Mar 13 '17 at 15:00

score 0 · Answer 1 · answered Mar 13 '17 at 15:02

0

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

answered Mar 13 '17 at 15:02

Stefdelec

2,711
3
33
40

That is what i don't understand. I use the same script on my login page, and it was working. Unless it is submitting twice as well i just don't see it. This part I added as part of the suggestions i read on other questions: e.preventDefault() e.stopImmediatePropagation(); – Riaan Mar 13 '17 at 15:04
I tried your suggestion. The button disabled and redirects, but still submits twice. – Riaan Mar 13 '17 at 15:17
I know it it suggested on other posts. However, I think you should find a way around because one day you will spend days to understand why event doesnot trigger another function. – Stefdelec Mar 13 '17 at 15:18
Check in your console, if the event listener is registered twice – Stefdelec Mar 13 '17 at 15:18

score 0 · Answer 2 · answered Mar 14 '17 at 11:12

I would like to thank everyone for the assistance. I found the problem.. it was something stupid in the end. When i ran through my back end code i found that i was executing the PHP PDO execute statement twice. I have fixed it and now everything works as expected. @stefdelec suggestion to see if the event is registered twice suggestion I found that that it was sending once only and thus had to be something else and not JQUERY.

Jquery Ajax Double Summit

2 Answers2