Question

I am trying to get a form field value after the form has been submitted. Here my Jquery:

$(document).ready(function() { 
    var options = { 
        target:        '.error_box_wrapper',
        dataType:      'html',
        beforeSubmit:  showRequest,
        success:       showResponse
    }; 

    $('#edit_group_form').live('submit', function() {
        $("#progress").show();
        $(this).ajaxSubmit(options); 
        return false;
    });
});
// pre-submit callback 
function showRequest(formData, jqForm, options) { 
    var queryString = $.param(formData); 
    var groupid = $('input[name=groupid]').fieldValue();
    return true; 
} 
// post-submit callback 
function showResponse(responseText, statusText, xhr, $form)  {  
    $("#leftside div#groups_container").load('includes/my_groups.php');
    $("#middle").load('includes/main_middle_div.php?view=editgroup&groupid=' + groupid); 
    $("#progress").hide(); 
} 

As you can see, I can get the form field value in the pre-submit callback function:

var groupid = $('input[name=groupid]').fieldValue();

But, I am unable to use this variable in the post-submit callback function here:

$("#middle").load('includes/main_middle_div.php?view=editgroup&groupid=' + groupid);

I think what I’m trying to is to pass the groupid variable from the pre-submit callback function to the post-submit callback function..

Answer 1

scope issue… cache groupid in pre-submit

$(document).ready(function() { 
    var options = { 
        target:        '.error_box_wrapper',
        dataType:      'html',
        beforeSubmit:  showRequest,
        success:       showResponse
    }; 

    $('#edit_group_form').live('submit', function() {
        $("#progress").show();
        $(this).ajaxSubmit(options); 
        return false;
    });
});
// pre-submit callback 
function showRequest(formData, jqForm, options) { 
    var queryString = $.param(formData); 
    $(document).data("groupid", $('input[name=groupid]').fieldValue());
    return true; 
} 
// post-submit callback 
function showResponse(responseText, statusText, xhr, $form)  {  
    $("#leftside div#groups_container").load('includes/my_groups.php');
    $("#middle").load('includes/main_middle_div.php?view=editgroup&groupid=' + $(document).data("groupid")); 
    $("#progress").hide(); 
}