Question

I have two forms on a single page. Actually they’re seperated pages but the page-content is loaded into several divs enabling a sliding-effect through pages.

In one div I have a small form with two text-inputs. I can submit it without a problem. At another div I have a contact form. It’s using the same script for handling the form. The only thing changed is the #id from where the .submit() should be binded to.

For some reason I just can’t get the second form to work. Is there a limitation on forms in a page (I know, it sounds stupid but I’m clueless here…)?

The forms look like :

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

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

The jQuery, within $(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;
    });

A live example can be found on http:vfw.ontdek5.nl/index.php. It’s in Dutch but the forms are on the pages ‘Gratis Proefles’ and ‘Contact’.

Answer 1

Try jquery live functionality for dynamically loaded forms!

jQuery.live();