submit a form among others after the forms are added to page

Question

I have a page with a search button. After hitting the submit button an ajax request is made to get the json from the controller and fill my page with many boxes of products. Each box is a new form with a submit button. I want to be able to submit only one of those new products forms, make some stuff in my DB and the alert success in a div in the very form I submitted. The point is since I don't have my forms initially in the page my script doesn't find any, so how can I attach an ajax function to forms I don't have in the page but that I will have later? And how do I submit a single form in ajax? I tried to use one id for all forms created example and then trying to catch the submit with this code but it doesn't work. The page navigates to my route instead of preventing default and alerting success:

jQuery(function ($) {
    $(document).ready(function () {

        $(function () {
            $('form#dynamic').on('submit', function (e) {
                $.ajax({
                    url: form.prop('action'),
                    type: 'post',
                    dataType: 'json',
                    data: $(this).serialize(),
                    success: function (data) {

                        console.log(data);
                        alert('success');
                    }
                });
                e.preventDefault();
            });
        });
    });
});

I have to add that I already have two forms in the page for searching that are attached to another ajax call, like this:

var form = $(this);

This one works:

jQuery(function ($) {
    $(document).ready(function () {

        $("body").on("submit", "form#dynamic", function (e) {

            var form = $(this);

            $.ajax({
                url: form.prop('action'),
                type: 'post',
                dataType: 'json',
                data: $(this).serialize(),
                success: function (data) {
                    console.log(data);
                    alert('success');
                }
            });
            e.preventDefault();
        });

    });
});

You should finish adding the new forms first before attempting to attach an event to them. — dokgu, Dec 22 '15 at 18:42
Please post your form also. It is important to follow the events form the moment you click on the button and check of the references you have in your ajax call are good set. I advise you also to do this: form.attr('action'), for your url. Which version of jQuery are you using? — Franco, Dec 22 '15 at 19:05

dokgu · Answer 1 · 2015-12-23T15:44:00.107

0

Try

$("body").on("submit", ".class-of-added-form", function() {
    // Do stuff here..
});

What this does is basically attach the event to your body, instead of the form itself which is dynamically added to the page.

Just make sure you are using unique id on each form.

UPDATE

I created a Fiddle for you.

edited Dec 23 '15 at 15:44

answered Dec 22 '15 at 18:36

dokgu

4,957
3
39
77

Uncaught ReferenceError: form is not defined – Chriz74 Dec 22 '15 at 18:40
What's the structure of those elements / forms you are adding? – dokgu Dec 22 '15 at 18:40
@Chriz74 I updated my answer to include a fiddle. Try it out. – dokgu Dec 23 '15 at 15:42
Did you see the updated question? i used your solution testardaggine – Chriz74 Dec 23 '15 at 15:43
@Chriz74 Just use `$('#parent-container').on('submit', 'form', function (e) {});` – dokgu Dec 23 '15 at 15:51
@Chriz74 Also, don't use the same `id` on all your products. `id` is supposed to be unique. – dokgu Dec 23 '15 at 15:53
Your suggested #parent-container method doesn't work. @Patrick – Chriz74 Jan 08 '16 at 17:16

score 0 · Answer 2 · answered Dec 22 '15 at 18:58

In your AJAX submission for the first/parent form add a classname for all new forms that is returned or added to the page. Then set up a listener for the child form submission.

And finally, in the success function of the child form submission turn off the listener so it will run only for one child form.

jQuery(function ($) {
    $(document).ready(function () {

        $(function () {
            $('form#dynamic').on('submit', function (e) {
                $.ajax({
                    url: form.prop('action'),
                    type: 'post',
                    dataType: 'json',
                    data: $(this).serialize(),
                    success: function (data) {

                        console.log(data);
                        alert('success');

                        //listener for child form
                        $('.childForm').on('submit.child', function(evt){
                            evt.preventDefault();
                            //submit the child form here
                            $.ajax({
                                url:'',
                                success: function(){
                                    //turn off listener for child form
                                    $('.childForm').off('submit.child');
                                }
                            })
                        })

                    }
                });
                e.preventDefault();
            });
        });
    });
});

submit a form among others after the forms are added to page

2 Answers2

UPDATE