Question

我在一个页面上有两个表单。实际上它们是分开的页面，但页面内容被加载到几个div中，从而实现了页面的滑动效果。

在一个div中，我有一个带有两个文本输入的小表单。我可以毫无问题地提交它。在另一个div，我有一个联系表格。它使用相同的脚本来处理表单。唯一改变的是#id，其中.submit（）应绑定到。

出于某种原因，我无法让第二种形式发挥作用。页面中的表单是否有限制（我知道，这听起来很愚蠢，但我在这里一无所知......）？

表格如下：

<form id='form-1'>
..
</form>

<form id='form-2'>
..
</form>

jQuery，在$(document).ready(function(){});

中

$("#gratis-proefles").submit(function(){
        var str = $(this).serialize();

        $.ajax({
            type:   "POST",
            url:    "ajax.php?type=proefles",
            data:   str,
            success: function(result){ 
                $("#ResultAanvraagProefles").ajaxComplete(function(event, request, settings){    
                    if(result == true)
                    {
                        $(this).html('<span style="color:#76c5f0;"><strong>Bedankt voor je aanvraag! We nemen zo snel mogelijk contact met je op om de gratis proefles in te plannen!</strong></span>');
                        $(":input", "#gratis-proefles")
                             .not(":button, :submit, :reset, :hidden")
                             .val("");                    
                    }
                    else
                    {
                        $(this).html('<span style="color:#FF0000;"><strong>Om een gratis proefles aan te kunnen vragen is het verplicht om zowel je naam als je telefoonnummer op te geven.</strong></span>');
                    }                         
                });
            }
        });

        return false;
    });

    $("#contact-formulier").submit(function(){
        var str = $(this).serialize();

        $.ajax({
            type:   "POST",
            url:    "ajax.php?type=contact",
            data:   str,
            success: function(result){ 
                $("#ResultContact").ajaxComplete(function(event, request, settings){    
                    if(result == true)
                    {
                        $(this).html('<span style="color:#76c5f0;"><strong>Bedankt voor je bericht! We nemen zo snel mogelijk contact met je op!</strong></span>');
                        $(":input", "#contact-formulier")
                             .not(":button, :submit, :reset, :hidden")
                             .val("");
                    }
                    else
                    {
                        $(this).html('<span style="color:#FF0000;"><strong>Alle velden zijn verplicht in te vullen.</strong></span>');
                    }                         
                });
            }
        });

        return false;
    });

可以在http:vfw.ontdek5.nl/index.php找到一个实例。它是荷兰语，但表格在“Gratis Proefles”和“Contact”页面上。

Answer 1

我可以在示例网站的HTML中看到您的表单的ID为“contact-formuliers”，但在您的代码中，它是“contact-formulier”。问题可能就像......那样简单。

Answer 2

您的第二个ID

中有拼写错误

contact-formulier应为contact-formuliers

Answer 3

为动态加载的表单尝试jquery实时功能！

jQuery.live();

Answer 4

我不确定你的第二个表单是如何被拉入页面的，但它听起来像一个事件没有绑定，因为它在页面加载后被添加到页面中。看到你使用jquery 1.5尝试使用.delegate（http://api.jquery.com/delegate/）但在更高级别，在你的情况下尝试像$（'＃slider'）。委托（'输入：提交”， '点击'，功能（事件）{}）;然后，您可以选择单击了哪个提交按钮，然后找到该表单并提交该表单。

无法使用jQuery ajax提交第二个表单

4 个答案: