Как предотвратить использование сценария PHP / Ajax с использованием сериализации из нескольких отправок?

Question

Я использую PHP / Ajax / serialize, чтобы отправить простую форму самому себе. Я использую следующий JavaScript, чтобы настроить его для сериализации / публикации данных. Вы можете увидеть демо на https://www.dottedi.biz/demo/code/public/addtocart.php. Там есть ссылка на .txt версию скрипта.

$(function() {
  var form = $("#addtocart");
  $(form).submit(function(e) {
    e.preventDefault();
    var formData = $(form).serialize();
    $("#result").html( "" );
    $.ajax({
      type: "POST",
      url: $(form).attr("action"),
      data: formData,
      success: function(html) { $("#result").html(html); }
    })
  });
});

После нажатия кнопки Купить сейчас он должен добавить только одну строку в базу данных. При первом нажатии на кнопку она добавляет одну строку. Если вы нажмете еще раз, он добавит две новые строки, затем три новые строки и т. Д. Он последовательно добавит дополнительные строки, если вы нажмете «Отправить». Чтобы остановить это, вы должны перезагрузить форму.

Answer 1

Поместите идентификатор кнопки в id = "addtocart_id"

$(function() {
  var form = $("#addtocart");
  var count_btn = true;
  form.submit(function(e) {
    e.preventDefault();
    if(count_btn){
      var formData = form.serialize();
      $("#result").html("");
      $.ajax({
        type: "POST",
        url: form.attr("action"),
        data: formData,
        beforeSend: function () {
          $("#addtocart_id").html("Please Wait...").prop("disabled", true);
        },
        success: function(html) { $("#result").html(html); }
        complete: function(){
                  count_btn = false;
                  $("#addtocart_id").html("Now Reload from browser");
        }
      })
    }
  });
});