jQuery Ajax Failure Handler Called, but Form Data Posted Twice, Successfully -

i have prog-enhanced form posts (when javascript enabled) using jquery.

when javascript disabled, works fine.

<form class="clearfix" action="https://examples.com/api/rest/members/memberidnotshownforsecurity/examples/?on_success=https://examples.com/account/examples?alerts=inserted&amp;on_failure=https://examples.com/error" method="post" onsubmit="return false;">     <input id="url" type="text" name="example_url" placeholder="paste link example it"><br>     <button id="insertexample" type="button">create</button> </form> 

when #insertexample button clicked, jquery handles request.

<script type="text/javascript">     $(document).ready(function() {         var insertexamplemutex = false;         $("#insertexample").on('click', null, function(event) {             if ( insertexamplemutex == false ) {                 insertexamplemutex = true;                 var reference = $(this);                 var progsubmit = reference;                 var progform = progsubmit.parents('form');                 var progmethod = progform.attr('method');                 var progaction = progform.attr('action').substring( 0, progform.attr('action').indexof('?') );                 var progdata = progform.serialize();                 var inventory = reference.parents('#core').find('#inventory');                 progsubmit.html('loading...');                 $.ajax({                     type: progmethod,                     url: progaction,                     data: progdata,                     datatype: 'json'                 }).done(function(data) {                     if ( data.status == '1' ) {                         inventory.prepend('<div style="cursor: pointer;" id="selectexample" href="' + "https://examples.com" + '/api/rest/members/' + data['data']['member_examples']['member_id'] + '/examples/' + data['data']['member_examples']['example_id'] + '" class="alert bgsuccess"><center><p class="psmall">a new example created. click here display.</p></center></div>');                     } else {                         inventory.prepend('<div style="cursor: pointer;" onclick="window.location.reload();" class="alert bgfailure"><center><p class="psmall">an error occurred.</p></center></div>');                     }                 }).fail(function() {                     inventory.prepend('<div style="cursor: pointer;" onclick="window.location.reload();" class="alert bgfailure"><center><p class="psmall">an error occurred.</p></center></div>');                 }).always(function() {                     progform[0].reset();                     progsubmit.html('create');                     inventory.children('p').remove();                     insertexamplemutex = false;                 });             }         });     }); </script> 

the problem .failure() request handler triggered... though post successful. second issue it's not successful once, twice.

two entries created in db identical data, except id of course.

i've searched bit, found nothing conclusive.

• i'm using mutex variable ignores multiple requests.

• the form not being submitted browser, , javascript. both originate ajax call (which seems impossible because of mutex variable)

• i read ajax might getting 301, cause post again redirected url, doesn't seem case.

in experience, failure handler fire if javascript handles successful responses server fails. in other words, server can successful, error event triggered if client fails handle correctly. can try debug javascript fires on response using chrome or firebug or something.

i have encountered double-hit issues when $(document).ready function fires more once. example, if script block posted in html included more 1 time, cause code wired more once.

again, stick breakpoint in document.ready function see whats happening.