Generating multiple AJAX codes for dynamically generated elements in Javascript,

Question

I have a script which dynamically generates form elements with their corresponding ID, for e.g.

response from MySQL db says - 4, then

<form ID="form0">
<Input>....
<Button type="submit>....
</form>

<form ID="form1">
<Input>....
<Button type="submit>....
</form>

<form ID="form2">
<Input>....
<Button type="submit>....
</form>

<form ID="form3">
<Input>....
<Button type="submit>....
</form>

once this list of forms are generated, I have an AJAX code which detects the submit buttons and send the input values off to db via PHP page, something like this below,

$(document.body).on('submit', '#form' ,function(e){
e.preventDefault();
var postData = $("#form").serialize();

$.post("../../../functions/processing.php",postData,function(data, status){
  var selectedData = JSON.parse(data);     
  $.each( selectedData, function( i, val ) {
             // do something here...                                           
       });
});
});

So my question is that, for the list of forms, I have to somehow generate multiple of this AJAX code for form0, form1, form2, form3.. and because I can't anticipate how many forms will be generated, I can't just write one AJAX code like the one above.. is there anyway to dynamically generate AJAX codes for dynamically generated multiple forms?

tvanfosson · Accepted Answer · 2014-12-27 16:49:29Z

1

Give the form a class that identifies it as a form to be handled by your AJAX handler. Then, inside the handler, reference this to get the form element that is being submitted.

<form ID="form0" class="js-ajax-form">
   <input>....
   <button type="submit>....
</form>

Handler

$(document).on('submit', '.js-ajax-form' ,function(e){

    e.preventDefault();
    var postData = $(this).serialize();

    $.post("../../../functions/processing.php",postData,function(data, status){
      var selectedData = JSON.parse(data);     
      $.each( selectedData, function( i, val ) {
                 // do something here...                                           
           });
    });

});

answered Dec 27, 2014 at 16:49

tvanfosson

534k102 gold badges703 silver badges801 bronze badges

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

Collectives™ on Stack Overflow

Generating multiple AJAX codes for dynamically generated elements in Javascript,

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related