Ajax message gets skipped to the url page not on required div

***I have the above jQuery file, which Ajaxify two form login and signup through function submitForm and registerForm. Both the function works properly. However registerForm doesn’t Ajaxify the success message on model-footer div, which is below form, the message gets displayed on URL page signup.php. am I accessing the form properly in the register function…please guide…Thanks ***

$(function(){

    $('.form').on('submit', function(e){

        e.preventDefault();

        $form = $(this);

        submitForm($form);        

        $reg = $('register');
        registerForm($reg);  
}); 
    $('#forgot-password').on('click', function( e ){
        e.preventDefault();
        $('#login').modal('hide');
    });
});

function submitForm($form){

    $footer = $form.parent('.modal-body').next('.modal-footer');  
    $footer.html('<img src="public/images/ajax-loader.gif">');
	$.ajax({
        url: $form.attr('action'),
        method: $form.attr('method'),    
		data: $form.serialize(),
        success: function(response){
            response = $.parseJSON(response);         
				if(response.success){           
					if(!response.signout){
						setTimeout(function(){
						$footer.html( response.message );
						window.location = response.url;
					},5000);
				}
             $footer.html( response.message );         

        }
         else if(response.error){
				$footer.html( response.message );
			 }
				console.log(response)

		}

     });

}

function registerForm($form){

            $footer = $form.parent('.modal-body').next('.modal-footer');  
			$footer.html('<img src="public/images/ajax-loader.gif">');
			var data = new FormData('register');
			$.ajax({
                url: $form.attr('action'),              

                data: data,
                type: "POST",      
				processData: false,
				contentType: false,
				success: function(response){
					response = $.parseJSON(response);
					if(response.success){                  
						if(!response.signout){
							setTimeout(function(){
							$footer.html( response.message );
							window.location = response.url;
						},5000);
					}
						$footer.html( response.message );

                 }

                 else if(response.error){

                    $footer.html( response.message );
				}
					console.log(response)
				}

             });
}

not really sure what the issue is (was just a long run-on sentence, perhaps using bullets points and spacing will help identify the issues you want addressed?)

Anyways…

question: Why dont you have the callback/success function in your submitForm() function call the register formForm() function?

I’m also not clear what you mean by: “Ajaxify”… what specifically is it you want done?

I -think- your saying that the upon completion of the registerForm() function… some footer DOM element is NOT being updated?

Hi,
Thank you for your reply.
yes, I want to update the message in footer DOM, which is div modal-footer.
I am using two different functions and success/callback because one has a data value of $.form.serialize, which handles the login part
and another has a data value FormData, which helps me to insert an image into the database.
Let’s say I have two forms one with login.

and another form for registration user with image profile login part works perfectly but when I registerthe user I got success message on URL page not with in the modal-footer div
Sponsor our Newsletter | Privacy Policy | Terms of Service