将表单添加到页面后提交表单

Posted 2023-02-19

【中文标题】将表单添加到页面后提交表单

【英文标题】：submit a form among others after the forms are added to page

【发布时间】：2016-03-29 02:21:52

【问题描述】：

我有一个带有搜索按钮的页面。在点击提交按钮后，发出 ajax 请求以从控制器获取 json 并在我的页面中填充许多产品盒。每个框都是一个带有提交按钮的新表单。 我希望能够只提交其中一个新产品表单，在我的数据库中制作一些东西，并在我提交的表单中的 div 中成功提醒。 关键是因为我最初在页面中没有我的表单，所以我的脚本没有找到任何表单，那么如何将 ajax 函数附加到我在页面中没有但我稍后会有的表单？以及如何在 ajax 中提交单个表单？我尝试为所有创建的表单示例使用一个 id，然后尝试使用此代码捕获提交，但它不起作用。该页面导航到我的路线，而不是阻止默认和警报成功：

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

我必须补充一点，我已经在页面中有两个表单用于搜索，它们附加到另一个 ajax 调用，如下所示：

var form = $(this);

这个有效：

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

    );
);

【问题讨论】：

您应该先完成新表单的添加，然后再尝试将事件附加到它们。

也请张贴您的表格。当您单击按钮并检查您在 ajax 调用中的引用是否正确设置时，遵循事件表单非常重要。我建议你也这样做：form.attr('action')，为你的 url。您使用的是哪个版本的 jQuery？

【参考方案1】：

在您的第一个/父表单的 AJAX 提交中，为返回或添加到页面的所有新表单添加一个类名。然后为子表单提交设置监听器。

最后，在子表单提交的成功函数中关闭监听器，让它只为一个子表单运行。

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

【参考方案2】：

试试

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

这基本上是将事件附加到您的正文，而不是动态添加到页面的表单本身。

只需确保您在每个表单上使用唯一的id。

更新

我为你创建了一个Fiddle。

【讨论】：

Uncaught ReferenceError: form is not defined

您要添加的那些元素/表单的结构是什么？

@Chriz74 我更新了我的答案以包含一个小提琴。试试看。

你看到更新的问题了吗？我用了你的解决方案 testardaggine

@Chriz74 就用$('#parent-container').on('submit', 'form', function (e) );