Verhindern doppelte Vorschreibungen Formular

Question

Ich habe ein Formular, das einen Absenden-Button hat. Wenn ich diese Schaltfläche zum Senden klicken Sie dann JSON an einen Webdienst über AJAX geschrieben werden:

$("#msform").submit(function (e) { 

    $.ajax({ 
     url: 'https://example.com/webservice', 
     type: 'POST', 
     data: formData1, 
     crossDomain: true, 
     dataType: 'json', 
     jsonpCallback: 'callback', 
     success: function (data) { 
      console.log(data); 
     } 
    }); 

}); 

Die Webseite wird auch auf eine andere Seite laden und gehen .. Während der Benutzer das Laden mehrere Male auf dem Absenden klicken können Taste, wenn Das macht er dann mehrmals für die AJAX-Post zum Webservice.

habe ich versucht, diesen Code dieses Problem zu beheben, aber es funktioniert nicht:

// jQuery plugin to prevent double submission of forms 
jQuery.fn.preventDoubleSubmission = function() { 
    $(this).on('submit', function (e) { 
     var $form = $(this); 

     if ($form.data('submitted') === true) { 
      // Previously submitted - don't submit again 
      e.preventDefault(); 
     } else { 
      // Mark it so that the next submit can be ignored 
      $form.data('submitted', true); 
     } 
    }); 

    // Keep chainability 
    return this; 
}; 

$('#msform').preventDoubleSubmission(); 

Jede Idee, warum doppelte Buchung nicht verhindert wird ??

Answer 1

Die Lösung ist eine variable namens wasSubmitted zu verwenden, die überprüfen, ob ajax Anfrage bereits gesendet wurde.

var wasSubmitted = false; 
$("#msform").submit(function (e) { 
    if(!wasSubmitted) { 
     wasSubmitted = true; 
     $.ajax({ 
      url: 'https://example.com/webservice', 
      type: 'POST', 
      data: formData1, 
      crossDomain: true, 
      dataType: 'json', 
      jsonpCallback: 'callback', 
      success: function (data) { 
      console.log(data); 
      } 
     }); 
     return wasSubmitted; 
    } 
    return false; 
}); 

Answer 2

Ich denke, ein einfaches prevent

$("#msform").submit(function (e) { 
    e.preventDefault(); 

    $.ajax(..) 

Answer 3

Die Lösung wäre genug, dass zuerst mir in den Sinn kommt, ist die Schaltfläche Onclick mit JS zu deaktivieren.

document.getElementById("btn_id").setAttribute("disabled","disabled");