Can't submit generated form

Question

I want to submit a form that's been created dynamically (by a previous form submit) using AJAX, but I'm not able to get it to work successfully. The generated form has the format shown, and is being created successfully

<div id="1" class="container-element">
    <h3>HEADER</h3>
    <form id="formCELL" name="form_1" action="refresh.php" method="post">
        <div class="panel-body">
            <div class="col-xs-10 com">CONTENT GOES HERE</div>                                                                                                                               
            <div class="col-xs-2 btn"><button class="btn btn-primary" id="refresh" type="submit">Refresh</button>                                                                </div>                                                            
        </div>                                                        
    </form>                                                      
</div>

The functions used to generate the form, and then refresh the content, is here. Right now, the $('#formCELL').submit(function(event) function isn't being entered when the refresh button is clicked.

$(document).ready(function() {

    $('#formMAIN').submit(function(event) {

        //formCELL is generated here through AJAX call.....

    });

    $('#formCELL').submit(function(event) {

        // process the form
        alert("about to submit");
        //AJAX call to go here

        event.preventDefault();
    });

});

I'm guessing that the problem has to do with me having my submit function within $(document).ready, that the form I want to refresh hasn't been created at this point yet, but I'm not sure how to continue from here.

Possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — freedomn-m, Sep 13 '16 at 08:27
formCELL doesn't exist when you call `$("#formCELL").submit()`, so there's nothing for it to bind to. — freedomn-m, Sep 13 '16 at 08:28

Leonard Lepadatu · Accepted Answer · 2016-09-13T08:54:19.297

1

Try:

$(document).on('submit', '#formCELL', function(event) { ... });

I create a jsFiddle for you: JsFiddle

I modify the jsFiddle according your needs. Now first form generate second form that is handled by seconf submit function

edited Sep 13 '16 at 08:54

answered Sep 13 '16 at 08:26

Leonard Lepadatu

606
8
14

Thank you. I have a few other unrelated issues to fix, but $(document).on is allowing me to edit the content of dynamically created divs. Thank you! – PaulMasterson Sep 13 '16 at 09:33

score 0 · Answer 2 · answered Sep 13 '16 at 08:15

You are right. Move the second submit handler into the first one, after the creation of the form, like this:

$(document).ready(function() {

  $('#formMAIN').submit(function(event) {

    $.ajax(....).done(function(result) {
      //formCELL is generated here ...
      $('#formCELL').submit(function(event) {

        // process the form
        alert("about to submit");
         //AJAX call to go here

         event.preventDefault();
      });
    } 

  });

});

I'm trying all of the suggestions above right now - I'll post back later. — PaulMasterson, Sep 13 '16 at 08:41

score 0 · Answer 3 · answered Sep 13 '16 at 08:46

0

$(document).ready(function() {

$('#formCELL').submit();

$('#formCELL').on('submit', function(event) {

    // process the form
    alert("about to submit");
    //AJAX call to go here

    event.preventDefault();
});

});

answered Sep 13 '16 at 08:46

Beginner

4,118
3
17
26

score 0 · Answer 4 · answered Sep 13 '16 at 08:53

0

Try this

$(document).delegate('#formCELL','submit',function(event) {

        // process the form
        alert("about to submit");
        //AJAX call to go here

        event.preventDefault();
    });

answered Sep 13 '16 at 08:53

MKB

777
1
9
27

Can't submit generated form

4 Answers4

Linked