Apply the same event handler to multiple forms

Question

I am trying to loop the jQuery code below. Each form has a unique id starting from #product_1 to #product_35. I don't want to copy+paste the code below:

$('#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();
})};

I came up with the code below and I'm kinda stuck to loop the code.

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

Could anyone help me to fix this? Many thanks in advance

Don't use incremental `id` attributes. It's an anti-pattern. Put a common class on all the forms and then use `each()`, for example `$('.yourForm').each(function() { /* do something */ });` then use `data: $(this).serialize()` — Rory McCrossan, Feb 11 '20 at 11:27
Does this answer your question? [JavaScript closure inside loops – simple practical example](https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) — Nandita Sharma, Feb 11 '20 at 11:28
Along with the above comments you don't need add quotes to the incrememnt var `i` for future reference — akaBase, Feb 11 '20 at 11:29
`$('#product_' + i)` - remove the quotes from around `'i'` and you should be ok. But do consider changing the approach as detailed above. — freedomn-m, Feb 11 '20 at 11:31

Roy Bogado · Answer 1 · 2020-02-11T11:49:35.470

Why not using the 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
    }

  })

  );
})};

score 0 · Answer 2 · edited Feb 11 '20 at 11:35

0

you can do by following two ways,

Use JQuery start with attribute selector

$('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(

    );
    })};

Use common class for all forms, where provide class = "submitForm" for all form element (you can use any name for class)

$('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(

);
})};

edited Feb 11 '20 at 11:35

Rory McCrossan

331,213
40
305
339

answered Feb 11 '20 at 11:34

Bhushan Kawadkar

28,279
5
35
57

Just FYI, backticks don't work in markdown when following bullet points. You have to use the language tags – Rory McCrossan Feb 11 '20 at 11:36
1

@RoryMcCrossan, thanks for the information and editing the post!! – Bhushan Kawadkar Feb 11 '20 at 11:38

score -1 · Answer 3 · answered Feb 11 '20 at 11:33

Don't use incremental id attributes. It's an anti-pattern. Put a common class on all the forms and then select them all in a single jQuery object. Then you can bind a single event handler to all of them.

Within that event handler you can use the this keyword to refer to the specific form which raised the event in order to serialise it.

Also note that there is no success method on the jqXHR object returned from a $.ajax() call. I presume you intended to use done() or then() instead. Try this:

$('.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
  });
})

Apply the same event handler to multiple forms

3 Answers3