Dynamic JQuery Form Submit for Multiple Forms

Question

I have PHP that searches a database and then echoes an html form for each result found. These are loaded via AJAX into the main HTML page into a div on document load.

Now I want to have listeners for each of these forms submitting. They all have the same inputs. Each form has an incremental ID of processor (processor1, processor2, processor3, and so on).

So, depending on the results, it could be as little as one form or 50 forms. Is there a dynamic way of doing a form submit function rather than writing countless repetitive functions?

what do you mean by "doing form submit function"?

Michał Rybak
– Michał Rybak

2013-11-04 23:50:48 +00:00
Commented Nov 4, 2013 at 23:50 — Michał Rybak
– Michał Rybak, Commented Nov 4, 2013 at 23:50
$("#processor1").on( "submit", function( event ) {

Amie Crutchley
– Amie Crutchley

2013-11-04 23:52:37 +00:00
Commented Nov 4, 2013 at 23:52 — Amie Crutchley
– Amie Crutchley, Commented Nov 4, 2013 at 23:52

DarthTux · Accepted Answer · 2013-11-04 23:58:35Z

2

If you have

<form id="form1">
<form id="form2">

You can use a class selector

<form id="form1" class="forms">
<form id="form2" class="forms">

In jQuery:

$(function() {
 $('.forms').submit(function(e){
   e.preventDefault(); //Prevent submit
   console.log($(this)); //Current form submiting

   //Make ajax call for current form
 })
})

If u you need extra data for each form, you can use data atributte

<form id="form2" class="forms" data-myattr="myvalue">

And get it

...
$(this).data('myattr'); //myvalue
...

answered Nov 4, 2013 at 23:58

DarthTux

1561 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Amie Crutchley Over a year ago

If I wanted to use input values for only the submitted form, would I do this? $("this .inputclass").val(); instead of $("#form1 .inputclass").val();

Michał Rybak Over a year ago

$(this).find('.inputclass').val() will do.

DarthTux Over a year ago

$(this) is the current form object. You can use $(this).find("selector") to search elements in the form.

Michał Rybak · Accepted Answer · 2013-11-05 00:12:05Z

0

If using classes is (for some reason) not an option, you can also use 'starts with' selector:

$('#processor*').submit(function (e) { 
    e.preventDefault(); 
    ...
});

Note that the above function should be called as a callback to AJAX function that loads the forms.

answered Nov 5, 2013 at 0:12

Michał Rybak

8,7063 gold badges44 silver badges55 bronze badges

Collectives™ on Stack Overflow

Dynamic JQuery Form Submit for Multiple Forms

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related