Применить один и тот же обработчик событий к нескольким формам

Question

Я пытаюсь набрать oop код jQuery ниже. Каждая форма имеет уникальный id, начиная с #product_1 до #product_35. Я не хочу копировать + вставлять код ниже:

$('#product_1').on('submit', function(e) {
  e.preventDefault();
  var jqxhr = $.ajax({
    url: "https://script.google.com/macros/s/SAMPLE/exec",
    method: "GET",
    dataType: "json",
    data: $('#product_1').serialize()
  }).success();
})};

Я пришел с кодом ниже, и я вроде как застрял в l oop коде.

var i;
for (i = 1; i < 36; i++) {    
  $('#product_' + 'i').on('submit', function(e) {
    e.preventDefault();
    var jqxhr = $.ajax({
      url: "https://script.google.com/macros/s/SAMPLE/exec",
      method: "GET",
      dataType: "json",
      data: $('#product_' + 'i').serialize()
    }).success();
  })
};

Может ли кто-нибудь помочь мне исправить это? Большое спасибо заранее

Answer 1

Не используйте добавочные атрибуты id. Это анти-паттерн. Поместите общий класс на все формы, а затем выберите их все в одном объекте jQuery. Затем вы можете привязать один обработчик событий ко всем из них.

В этом обработчике событий вы можете использовать ключевое слово this для ссылки на специфицированную форму c, которая вызвала событие для его сериализации.

Также обратите внимание, что в объекте jqXHR, возвращенном из вызова $.ajax(), нет метода success. Я предполагаю, что вы намеревались использовать done() или then() вместо этого. Попробуйте это:

$('.product-form').on('submit', function(e) {
  e.preventDefault();
  var jqxhr = $.ajax({
    url: "https://script.google.com/macros/s/SAMPLE/exec",
    method: "GET",
    dataType: "json",
    data: $(this).serialize()
  }).done(function() {
    // request sent successfully
  });
})

Answer 2

вы можете сделать двумя способами:

1. Использовать JQuery начать с селектора атрибутов

$('form[id^=product_]').on('submit', function(e) {
    var $form = $(this);
    e.preventDefault();

    var jqxhr = $.ajax({

    url: "https://script.google.com/macros/s/SAMPLE/exec",
    method: "GET",
    dataType: "json",
    data: $form.serialize()

    }).success(

    );
    })};

Используйте общий класс для всех форм, где укажите class = "submitForm" для всех элементов формы (вы можете использовать любое имя для класса)

$('form.submitForm').on('submit', function(e) {
var $form = $(this);
e.preventDefault();

var jqxhr = $.ajax({

url: "https://script.google.com/macros/s/SAMPLE/exec",
method: "GET",
dataType: "json",
data: $form.serialize()

}).success(

);
})};

Answer 3

Почему бы не использовать object $('form')?

$('form').on('submit', function(e) {
  e.preventDefault();

  //Get the dinamic #id from the form.
  var idForm = $(this).attr('id');

  var jqxhr = $.ajax({

    url: "https://script.google.com/macros/s/SAMPLE/exec",
    method: "GET",
    dataType: "json",
    data: $('#'+idForm).serialize() // Or $(this).serialize(),
    success: function(data){
          //data = response from the url
    }

  })

  );
})};