Question

i’m having a problem with dynamically loaded forms – instead of using the action attribute of the newly loaded form, my jquery code is still using the action attribute of the first form loaded. I have the following code:

//generic ajax form handler - calls next page load on success
    $('input.next:not(#eligibility)').live("click", function(){
        $(".form_container form").validationEngine({
            ajaxSubmit: true,
            ajaxSubmitFile: $(this).attr('action'),
            success :  function() {
                var url = $('input.next').attr('rel');
                ajaxFormStage(url);
            },
            failure : function() {
            }
        });
    });

But when the next form is loaded, the above code does not pick up the new action attribute. I have tried adding the above code to my callback on successful ajax load (shown below), but this doesn’t make any difference.

Can anyone help? Many thanks

function ajaxFormStage(url)
{

        var $data = $('#main_body #content');

        $.validationEngine.closePrompt('body'); //close any validation messages

        $data.fadeOut('fast', function(){
            $data.load(url, function(){
                $data.animate({
                    opacity: 'show'
                }, 'fast');
    ');


                //generic ajax form handler - calls next page load on success
                $('input.next:not(#eligibility)').live("click", function(){
                    $(".form_container form").validationEngine({
                        ajaxSubmit: true,
                        ajaxSubmitFile: $(this).attr('action'),
                        success :  function() {
                            var url = $('input.next').attr('rel');
                            ajaxFormStage(url);
                        },
                        failure : function() {
                        }
                    });
                });
            });
        });

Answer 1

I believe it’s happening because using $(this) at this line

ajaxSubmitFile: $(this).attr('action')

you always get the first form’s action.

I think you need another selector to get the form that is closest to the clicked input.

Hope you understand what I mean :]