Search code examples
jqueryjquery-pluginsajaxform

Get form id using jQuery plugin ajaxForm and upload progress bar


I have several forms on one page which are submitted using ajaxForm and show upload progress. Each form has the same class '.input_form', a unique id, and a hidden input field with name and class of 'category' with a unique value. Here is the original example: http://jquery.malsup.com/form/progress.html

    var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');

$('.input_form').ajaxForm({
    beforeSend: function() {
        status.empty();
        var percentVal = '0%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    uploadProgress: function(event, position, total, percentComplete) {
        var percentVal = percentComplete + '%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    complete: function(xhr) {
        status.html(xhr.responseText);
        $('#activity_feed_load').load(querybuild());
        $('.wall_cat_selected').removeClass('wall_cat_selected');
        $('.input_form, .arrow').hide();
        var percentVal = '0%';
        bar.width(percentVal)
        percent.html(percentVal);
        $('.input_form').resetForm();
    }
});     

In the complete function, I'd like to retrieve the id of the form submitted or the value of the hidden field in the submitted form. I tried the following which didn't work.

var value = $('.input_form .category').fieldValue(); alert('The category is: ' + value[0]); 

Basically, I'm not sure how to retrive ($this) for the form submitted.

Thanks for your help!

Ok, I just found out how to do this from a related SO question here:

how to use $(this) in jquery ajaxform plugin

Basically, I just needed to add the following to my ajaxForm function:

success: function(html, status, xhr, myForm) {   
        alert(myForm.attr('id'));

    }

Hope this helps someone else.


Solution

  • Ok, I just found out how to do this from a related SO question here:

    how to use $(this) in jquery ajaxform plugin

    Basically, I just needed to add the following to my ajaxForm function:

    success: function(html, status, xhr, myForm) {   
            alert(myForm.attr('id'));
    
        }
    

    Hope this helps someone else.