[jquery] ajax success response load to divs

Question

Hello,

I have three forms and using this jquery function

$('form').submit(function() {
    $.ajax({
        type: $(this).attr('method'),
        url: $(this).attr('action'),
        data: $(this).serialize(),
  success: function(response) {
            $('#setInfo').fadeOut('500').empty().fadeIn('500').append(response);
        }
    });
        return false;
    });

to submit the form datas, but with this function i am stuck at loading the response at one particular div.

The data i send always have action=email, action=settings, etc depending on the form.

So how i can use it to load the response of settings in another div and email in another div and all other default in current div.

Thank You.

Answer 1

You could use a javascript variable to capture the intended target before submitting the request via AJAX then use the contents of that variable to determine the DIV to populate when the request returns.

$('form').submit(function() {
    var target = $('#action').val();
    $.ajax({
        type: $(this).attr('method'),
        url: $(this).attr('action'),
        data: $(this).serialize(),
        success: function(response) {
            var div = $('#setInfo');
            if (target == 'settings') {
               div = $('#settings');
            }
            else if (target == 'email') {
               div = $('#email');
            }
            div.fadeOut('500').html(response).fadeIn('500');
        }
    });
        return false;
});

Note I also changed it to set the HTML with the response before fading it in to avoid the possibility of it "blinking."

Answer 2

added a id of target to then

var target = $(this).find('#target').val();

later used tvanfossons code for loading